react之手动实现ssr跟next的区别

react ssr框架next.js具体文档:next文档;

自己手动结合react+node实现一个ssr需求:

单页应用存在的问题

SEO不友好

首次请求时间较长,体验不好

服务端渲染和客户端渲染的区别

客户端渲染路线:

请求html

服务端返回html

浏览器下载html里面的js/css文件

等待js文件下载完成

等待js加载并初始化完成

js代码可以运行后由js代码向后端请求数据( ajax/fetch )

等待后端数据返回

react-dom( 客户端 )从无到完整地,把数据渲染为响应页面

服务端渲染路线:

请求html

服务端请求数据( 内网请求快 )

服务器初始渲染(服务端性能好,较快)

服务端返回已经有正确内容的页面

客户端请求js/css文件

等待js文件下载完成

等待js加载并初始化完成

react-dom( 客户端 )把剩下一部分渲染完成( 内容小,渲染快 )

最简单的react服务端渲染(生产环境)

你可能感兴趣的:(react之手动实现ssr跟next的区别)