最近几年都在做 To B 的东西，所以一直没机会接触 SSR，拓展视野看了下 Next.js。

为了搜索引擎能搜索能根据某些关键词搜索到网站，必需预先把数据丢到页面上，但是普通的 React 或者 Vue 是后执行的，导致搜索引擎获取不到数据，所以出现了 SSR （Server Side Render）这么一种说法。

想到服务端渲染，第一肯定是想到数据获取，毕竟最主要的目的就是这个嘛，上 Demo

function Page({ data }) {
    return (
        <div>
            {data.data && data.data.map(item=><div key={item.appid}>{item.name}</div>)}
        </div>
    )
}

export async function getServerSideProps() {
    const res = await fetch(`http://rap2api.taobao.org/app/mock/24484/apps`)
    const data = await res.json()
    return { props: { data } }
}

export default Page

通过 export 一个函数来给 Next.js 使用，它自动在请求这个页面时，执行这个函数，然后把得到的结果注入页面中执行编译，最后再返回。

Next.js 自己制定了一套路由规则，按照约定目录格式书写即可。

除此还提供了一些内置组件和函数，比如 next/link, next/route，当然它也支持 Redux。

初步体验下来，感觉倒没有什么大问题，当然和普通 Client Side 还是有一定区别的，去年刷到一个 React Server Component 的视频，当时还不太成熟，但是使用起来很方便，没有什么学习成本，过几天翻翻文档也写个程序试试。