当前位置：首页 > 科技 > 软件

基于Puppeteer实现前端SSR完美接入方案

来源：责编：时间：2024-05-20 17:55:07 206观看

导读什么是SSR？SSR 全称是 Server Side Rendering 代表的是服务端渲染。与客户端渲染不同的是，SSR 输出的是⼀个渲染完成的html，整个渲染过程是在服务器端进⾏的。例如传统的ASP、JSP、PHP等都是服务端渲染。优点有利于 SEO，

什么是SSR？

SSR 全称是 Server Side Rendering 代表的是服务端渲染。与客户端渲染不同的是，SSR 输出的是⼀个渲染完成的html，整个渲染过程是在服务器端进⾏的。例如传统的ASP、JSP、PHP等都是服务端渲染。

优点

有利于 SEO，由于页⾯在服务器⽣成，搜索引擎直接抓取到最终页⾯结果。
有利于⾸屏渲染，html 所需要的数据都在服务器处理好，直接⽣成 html，⾸屏渲染时间变短。

缺点

占⽤服务器资源，渲染⼯作都在服务端渲染
⽤户体验不好，每次跳转到新页⾯都需要在重新服务端渲染整个页⾯，不能只渲染可变区域

SSR 主要伪代码

index.html

<!DOCTYPE html><html><head>    <title>        开源技术小栈    </title>"/></head><body id="PUPPETEER_SSR"><div id="app">    <div class="page-home">        <div class="item-nav">            公众号        </div>    </div></div><script type="text/javascript">    document.querySelector("body>div").innerHTML = "";</script><script src="xxxx.js"></script></body></html>

什么是 CSR？

CSR 全称是 Client Side Rendering 代表的是客户端渲染。顾名思义，就是在渲染⼯作在客户端（浏览器）进⾏，⽽不是在服务器端进⾏。举个例⼦，我们平时⽤vue，react等框架开发的项⽬，都是先下载 html ⽂档（不是最终的完全的 html），然后下载 js 来执⾏渲染出页⾯结果。

优点

前后端分离。前端专注于界⾯开发，后端专注于 api 开发，且前端有更多的选择性，可以使⽤vue，react框架开发，⽽不需要遵循后端特定的模板。
服务器压⼒变轻了，渲染⼯作在客户端进⾏，服务器直接返回不加⼯的html。
⽤户在后续访问操作体验好，（⾸屏渲染慢）可以将⽹站做成 SPA（单页应⽤），可以增量渲染。

缺点

不利于 SEO，因为搜索引擎不执⾏ JS 相关操作，⽆法获取渲染后的最终 html。
⾸屏渲染时间⽐较长，因为需要页⾯执⾏ ajax 获取数据来渲染页⾯，如果请求接⼜多，不利于⾸屏渲染。

CSR 主要伪代码

index.html内容：

<!DOCTYPE html><html><head>    <meta charset=utf-8>    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">    <link rel=icon href=/favicon.ico>    <title>        开源技术小栈    </title>    <link rel=stylesheet href=//at.baidu.com/t/12321.css>    <link href=/js/app.7291647f.js rel=preload as=script>    <link href=/js/chunk-elementUI.a450811c.js rel=preload as=script>    <link href=/css/chunk-libs.48206084.css rel=stylesheet>    <link href=/css/app.cc84f854.css rel=stylesheet></head><body><noscript>    <strong>        前后端分离以及前后端框架的落地，基于标准的RESTFUL，制定接口规范和文档        前后端接口授权机制，身份认证和授权策略的拟定    </strong></noscript><script src=/js/runtime.2eb7950f.js></script><script src=/js/app.7291647f.js></script></body></html>

常见的 SSR 解决方案

Next.js 等同类型框架

Next.js 是基于 React 的服务端渲染⼯具。

优点

直观的、基于页⾯的路由系统（并⽀持动态路由）
预渲染。⽀持在页⾯级的静态⽣成 (SSG) 和服务器端渲染 (SSR)
⾃动代码拆分，提升页⾯加载速度
具有经过优化的预取功能的客户端路由
内置 CSS 和 Sass 的⽀持，并⽀持任何 CSS-in-JS 库
开发环境⽀持快速刷新
利⽤ Serverless Functions 及 API 路由构建 API 功能
完全可扩展

Puppeteer 通⽤ SSR 服务端渲染

Puppeteer 是⼀个 Node 库，它提供了⼀个⾼级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运⾏，但是可以通过修改配置⽂件运⾏“有头”模式。

本文链接：http://www.28at.com/showinfo-26-89408-0.html基于Puppeteer实现前端SSR完美接入方案

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：请求合并的三种技巧，性能起飞！

下一篇：怎么计算我们自己程序的时间复杂度

标签：

热门焦点

分布式系统中的CAP理论，面试必问，你理解了嘛？

对于刚刚接触分布式系统的小伙伴们来说，一提起分布式系统，就感觉高大上，深不可测。而且看了很多书和视频还是一脸懵逼。这篇文章主要使用大白话的方式，带你理解一下分布式系统
如何正确使用:Has和:Nth-Last-Child

我们可以用CSS检查，以了解一组元素的数量是否小于或等于一个数字。例如，一个拥有三个或更多子项的grid。你可能会想，为什么需要这样做呢？在某些情况下，一个组件或一个布局可能会
十个简单但很有用的Python装饰器

装饰器（Decorators）是Python中一种强大而灵活的功能，用于修改或增强函数或类的行为。装饰器本质上是一个函数，它接受另一个函数或类作为参数，并返回一个新的函数或类。它们通常用
之家push系统迭代之路

前言在这个信息爆炸的互联网时代，能够及时准确获取信息是当今社会要解决的关键问题之一。随着之家用户体量和内容规模的不断增大，传统的靠"主动拉"获取信息的方式已不能满足用
多线程开发带来的问题与解决方法

使用多线程主要会带来以下几个问题：（一）线程安全问题　　线程安全问题指的是在某一线程从开始访问到结束访问某一数据期间，该数据被其他的线程所修改，那么对于当前线程而言，该线程
三分钟白话RocketMQ系列—— 如何发送消息

我们知道RocketMQ主要分为消息生产、存储（消息堆积）、消费三大块领域。那接下来，我们白话一下，RocketMQ是如何发送消息的，揭秘消息生产全过程。注意，如果白话中不小心提到相关代
从零到英雄：高并发与性能优化的神奇之旅

作者 | 波哥审校 | 重楼作为公司的架构师或者程序员，你是否曾经为公司的系统在面对高并发和性能瓶颈时感到手足无措或者焦头烂额呢？笔者在出道那会为此是吃尽了苦头的，不过也得
支持aptX Lossless无损传输 iQOO TWS 1赛道版发布限时优惠价369元

2023年7月4日，“无损音质，声动人心”iQOO TWS 1正式发布，支持aptX Lossless无损传输，限时优惠价369元。iQOO TWS 1耳机率先支持端到端aptX Lossless无
电博会上海尔智家模拟500平大平层，还原生活空间沉浸式体验

电博会为了更好地让参展观众真正感受到智能家居的绝妙之处，海尔智家的程传岭先生同样介绍了展会上海尔智家的模拟500平大平层，还原生活空间沉浸式体验。程传

基于Puppeteer实现前端SSR完美接入方案

什么是SSR？

优点

缺点

SSR 主要伪代码

什么是 CSR？

优点

缺点

CSR 主要伪代码

常见的 SSR 解决方案

Next.js 等同类型框架

优点

Puppeteer 通⽤ SSR 服务端渲染

分布式系统中的CAP理论，面试必问，你理解了嘛？

如何正确使用:Has和:Nth-Last-Child

十个简单但很有用的Python装饰器

之家push系统迭代之路

多线程开发带来的问题与解决方法

三分钟白话RocketMQ系列—— 如何发送消息

从零到英雄：高并发与性能优化的神奇之旅

支持aptX Lossless无损传输 iQOO TWS 1赛道版发布限时优惠价369元

电博会上海尔智家模拟500平大平层，还原生活空间沉浸式体验

最新推荐

猜你喜欢

热门推荐

相关资讯