关于 Web 应用的 Prerender 策略

简介: 关于 Web 应用的 Prerender 策略

对于一些小型 Web 应用程序而言,强制使用服务器渲染(Server side render)可能会成为一种障碍。这时,预渲染可能是一个非常好的替代选择。


Prerender 的一种解决方案是使用 Preact 及其自己的 CLI.


它允许您编译所有预先选择的路由,以便将完全填充的 HTML 文件存储到静态服务器上。这样,就可以在不需要 Node.js 的情况下通过 Preact/React 水合(hydration)功能为用户提供超快的体验。


不过,需要注意的是,由于这不是服务器渲染,因此此时没有用户特定的数据可以显示,只是以静态文件的形式直接发送第一个请求。因此,如果您有用户特定的数据,需要在此处集成一个精美设计的 skeleton 来向用户展示其数据即将到来。


image.png


为了让这种预渲染技术发挥作用,还需要有一个代理或者其他的机制将用户重定向到正确的文件。


其原因是,在单页应用中,需要将所有的请求都重定向到根文件,然后框架通过内置的路由系统将用户重定向到相应的页面。所以第一次页面加载总是相同的根文件。


为了让预渲染解决方案发挥作用,你需要告诉你的代理某些路由需要特定的文件,而不是总是根目录下的index.html文件。


例如,假设你有四个路由(/、/about、/jobs 和/blog),它们都有不同的布局。你需要四个不同的HTML文件来向用户传递骨架,然后让React/Preact等重构它并填充数据。因此,如果你将所有这些路由都重定向到根目录下的index.html文件,页面在加载时会感觉很不好,用户会看到错误页面的骨架,直到它完成加载并替换布局。例如,用户可能会看到只有一个列的主页骨架,而他们请求的是一个像 Pinterest 一样的画廊页面。


解决方案是告诉代理这四个路由每个都需要一个特定的文件:


https://my-website.com → Redirect to the root index.html file

https://my-website.com/about → Redirect to the /about/index.html file

https://my-website.com/jobs → Redirect to the /jobs/index.html file

https://my-website.com/blog → Redirect to the /blog/index.html file

相关文章
|
7月前
|
前端开发 JavaScript 文件存储
关于 Web 应用的 Prerender 策略
关于 Web 应用的 Prerender 策略
59 0
|
1天前
|
机器学习/深度学习 安全 区块链
Web 3.0的主要目标是什么?
【4月更文挑战第25天】Web 3.0的主要目标是什么?
15 1
|
1天前
|
存储 人工智能 自然语言处理
web系统
【4月更文挑战第24天】web系统
17 2
|
1天前
|
关系型数据库 MySQL Java
|
1天前
|
人工智能 前端开发 JavaScript
Web 1.0、Web 2.0 和 Web 3.0 之间的比较
Web 1.0、Web 2.0 和 Web 3.0 之间的比较
74 0
Web 1.0、Web 2.0 和 Web 3.0 之间的比较
|
域名解析 人工智能 网络协议
Web基础(上)
Web基础(上)
185 0
Web基础(上)
|
Apache
Web基础(下)
Web基础(下)
103 0
Web基础(下)
|
JavaScript 前端开发 数据库
动态web 静态web
动态web 静态web
403 0
|
前端开发 JavaScript Java
web应用程序
web应用程序
100 0
|
存储 前端开发 安全
3 种 web 会话管理的方式
3 种 web 会话管理的方式
199 0