Next.js

最近几年都在做 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 的视频,当时还不太成熟,但是使用起来很方便,没有什么学习成本,过几天翻翻文档也写个程序试试。

本文链接:https://note.lilonghe.net/post/next-js.html

-- EOF --