现代化的服务端渲染(同构渲染）_react next 同构渲染

• 基于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>