react ssr Next.js 之 服務(wù)器渲染
這個(gè)真的頭疼啊俱两， 百度丫的怎么就不能出一個(gè)規(guī)范解決spa問(wèn)題曹步， API請(qǐng)求的時(shí)間要控制好， 最好不要超過(guò)半秒尿孔。
先安裝isomorphic-unfetch
修改my Page
import {Link, HeadF$ }from '../../next'
import fetch from 'isomorphic-unfetch'
const view$ = HeadF$({
title: 'my'
})
((props) =>
<div>
<p>my Page</p>
<Link href="/">
<a>go to index</a>
</Link>
<p>service</p>
{
// props.data.data.map(e =>
// <p>{e}</p>
// )
<p>fetch result:{props.data.error}</p>
}
</div>
)
view$.getInitialProps = async function() {
const URL = 'https://upload.qiniup.com/'
const res = await fetch(URL)
const data = await res.json()
return {
data: data
}
}
export default view$
然后打開view-source:http://localhost:3000/my
看到源碼
可以看到已經(jīng)在服務(wù)端渲染了活合。
嗯物赶， 就是這樣簡(jiǎn)單白指。
未完...
構(gòu)建大型項(xiàng)目肯定不能就這么設(shè)計(jì)酵紫， 等下再寫， 我先寫下第三部分比較重要的橄唬， 如何配合redux参歹。
