-
基于react、Vue等框架,客户端渲染和服务器渲染的结合
-
在服务端执行一次,用于实现服务端渲染(首屏直出)
-
在客户端再执行一次,用于接管页面交互
-
-
核心解决SEO和首屏渲染慢的问题
-
拥有传统服务端渲染的优点,也有客户端渲染的优点
如何实现同构渲染
-
使用Vue、React等框架的官方解决方案
-
优点:有助于理解原理
-
缺点:需要搭建环境,比较麻烦
-
-
使用第三方解决方案
-
React生态的Next.js
-
Vue生态的Nuxt.js
-
代码案例如下(Vue生态的Nuxt.js)
<template>
<div id="app">
<h1>{{ title }}</h1>
<ul>
<li v-for="item in posts" :key="item.id">
{{ item.title }}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'HomePage',
components: {},
// Nuxt中特殊提供的一个钩子函数,专门用于服务端渲染的数据
async asyncData(){
const { data } =await axios({
method:"GET",
url:'http://localhost:3000/data.json'
})
console.log(data)
// 这里返回的数据会和data()的数据合并在一起
return data
}
}
</script>