关于 Web 应用的 Prerender 策略

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

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


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


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


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

4f341a8e3f97a2c8a7ee4b5aee719748_9567b82dc2ff0ceb21bd24ce3d747b43.png

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


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


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


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


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



相关文章
|
21天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
3天前
|
开发框架 缓存 前端开发
利用Visual Basic构建高效的ASP.NET Web应用
【4月更文挑战第27天】本文探讨使用Visual Basic与ASP.NET创建高效Web应用的策略,包括了解两者基础、项目规划、MVC架构、数据访问与缓存、代码优化、异步编程、安全性、测试及部署维护。通过这些步骤,开发者能构建出快速、可靠且安全的Web应用,适应不断进步的技术环境。
|
4天前
|
前端开发 JavaScript Go
构建高性能Web应用:优化前端资源加载
在构建现代Web应用时,优化前端资源加载是至关重要的一步。本文将介绍一些提升Web应用性能的关键策略,包括减少HTTP请求、压缩和合并资源、使用CDN加速、以及异步加载技术等。通过实施这些优化策略,开发人员可以显著提升网站的加载速度和用户体验。
|
4天前
|
存储 中间件 Go
探索Gin框架:快速构建高性能的Golang Web应用
探索Gin框架:快速构建高性能的Golang Web应用
|
5天前
|
前端开发 JavaScript Java
前端与后端:构建现代Web应用的双翼
前端与后端:构建现代Web应用的双翼
|
5天前
|
安全 前端开发 JavaScript
在Python Web开发过程中:Web框架相关,如何在Web应用中防止CSRF攻击?
在Python Web开发中防范CSRF攻击的关键措施包括:验证HTTP Referer字段、使用CSRF token、自定义HTTP头验证、利用Web框架的防护机制(如Django的`{% csrf_token %}`)、Ajax请求时添加token、设置安全会话cookie及教育用户提高安全意识。定期进行安全审计和测试以应对新威胁。组合运用这些方法能有效提升应用安全性。
13 0
|
13天前
|
缓存 负载均衡 数据库
优化后端性能:提升Web应用响应速度的关键策略
在当今数字化时代,Web应用的性能对于用户体验至关重要。本文探讨了如何通过优化后端架构和技术手段,提升Web应用的响应速度。从数据库优化、缓存机制到异步处理等多个方面进行了深入分析,并提出了一系列实用的优化策略,以帮助开发者更好地应对日益增长的用户访问量和复杂的业务需求。
16 1
|
14天前
|
缓存 监控 数据库
Flask性能优化:打造高性能Web应用
【4月更文挑战第16天】本文介绍了提升Flask应用性能的七大策略:优化代码逻辑,减少数据库查询,使用WSGI服务器(如Gunicorn、uWSGI),启用缓存(如Flask-Caching),优化数据库操作,采用异步处理与并发(如Celery、Sanic),以及持续监控与调优。通过这些手段,开发者能有效优化Flask应用,适应大型或高并发场景,打造高性能的Web服务。
|
15天前
|
数据库 开发者 Python
Python中使用Flask构建简单Web应用的例子
【4月更文挑战第15天】Flask是一个轻量级的Python Web框架,它允许开发者快速搭建Web应用,同时保持代码的简洁和清晰。下面,我们将通过一个简单的例子来展示如何在Python中使用Flask创建一个基本的Web应用。
|
19天前
|
JavaScript 前端开发 API
Vue.js:构建高效且灵活的Web应用的利器
Vue.js:构建高效且灵活的Web应用的利器