react-server-component / swr

react-server-component

理想产品

• good user experience
• cheap maintenance
• fast performance

data fetch

• water fall
• pure data(relay+graphql)

// 父组件一次请求 || 三次请求 props传递 || 子组件分别请求

    
    

component

• server.js (no state no listerner / serializable / db query / SEO)
• client.js
• .js 共享组件 既可以在服务端渲染, 也可以在客户端渲染 shared component
• bundle size // server.js 中引入的第三方包不会打入到source中

only load necessary code

// 类似后台的动态导入
function Comp(isAdmin){
    return isAdmin?:<>
}

server or client

• server: 数据提取/预处理
• client: 用户交互/立即响应

reference

• [1] rfcs
• [2] video
• [3] demo

swr

React Hooks library for data fetching

• stale-while-revalidate // 异步更新缓存
• Cache-Control: max-age=5,stale-while-revalidate=10
• revalidate

useSWR / SWRConfig

 // swr   
 const {data, error} = useSWR('/swr', fetcher); 
 // normal
 useEffect(() => {
    fetch('/swr')
 }, []);

Performance

• dependency-collection
• request once
• async

reference

• [1] swr