首页 > 其他分享 >【Nuxt】服务端渲染 SSR

【Nuxt】服务端渲染 SSR

时间:2024-08-02 19:23:59浏览次数:12  
标签:浏览器 服务器端 渲染 SSR HTML Nuxt 服务端 页面

SSR 概述

服务器端渲染全称是:Server Side Render,在服务器端渲染页面,并将渲染好HTML返回给浏览器呈现。

SSR应用的页面是在服务端渲染的,用户每请求一个SSR页面都会先在服务端进行渲染,然后将渲染好的页面,返回给浏览器呈现。

构建SSR应用常见的库和框架有:Vue Nuxt, React Next.js等,SSR应用也称同构应用。

Nuxt:

在这里插入图片描述

优点

■SSR的优点

  • 更快的首屏渲染速度
    √浏览器显示静态页面的内容要比JavaScript动态生成的内容快得多。
    √当用户访问首页时可立即返回静态页面内容,而不需要等待浏览器先加载完整个应用程序。
  • 更好的SEO
    √爬虫是最擅长爬取静态的HTML页面,服务器端直接返回一个静态的HTML给浏览器。
    √这样有利于爬虫快速抓取网页内容,并编入索引,有利于SEO。
  • SSR应用程序在Hydration之后依然可以保留Web应用程序的交互性。比如:前端路由、响应式数据、虚拟DOM等。

■SSR的缺点

  • SSR通常需要对服务器进行更多API调用,以及在服务器端渲染需要消耗更多的服务器资源,成本高。
  • 增加了一定的开发成本,用户需要关心哪些代码是运行在服务器端,哪些代码是运行在浏览器端。
  • SSR配置站点的缓存通常会比SPA站点要复杂一点。

标签:浏览器,服务器端,渲染,SSR,HTML,Nuxt,服务端,页面
From: https://blog.csdn.net/XiugongHao/article/details/140877848

相关文章

  • [HITCON 2017]SSRFme 1
    目录代码审计@符号shell_exec()函数:GET".escapeshellarg($_GET["url"]):pathinfo($_GET["filename"]basename()题目解析代码审计118.182.186.90<?phpif(isset($_SERVER['HTTP_X_FORWARDED_FOR'])){$http_x_headers=explod......
  • NIS(Network Information Services)服务端在R系部署,客户端rpm,deb简单使用
    #!/bin/bash####@Author:[email protected]#@Date:2024-05-28#@LastEditors:[email protected]#@LastEditTime:2024-07-19#@FilePath:NIS-use.sh#@Description:NIS(NetworkInformationServices)source:https://www.th......
  • 汇川AM401的TCP服务端通信
    VARx建立连接:BOOL;abySendData_0:ARRAY[0..3]OFBYTE:=[76,79,78,13];abyRecvData_0:ARRAY[0..19]OFBYTE;TCP_Server_0:TCP_Server;TCP_Connect_0:TCP_Connect;TCP_Receive_0:TCP_Receive;TCP_Send_0:TCP_Send;iState......
  • HBuilderX 开发中使用 Node.js 搭建PDA扫码程序的服务端过程
    以下是使用HBuilderX和Node.js搭建程序服务端的大致步骤: 1. 安装Node.js首先,从Node.js官方网站下载并安装适合您操作系统的版本。在命令提示符中执行node-v,npm-v,检查nodejs版本是否安装完成。配置环境变量。2. 安装Oracle客户端根据您的操作系统,下载并安......
  • Nuxt3项目配置 Eslint、Prettierrc、Husky等项目提交规范
    为什么要提高项目规范?提高代码质量:项目开发规范能确保代码的一致性和可读性,使其他程序员能够更容易地理解和维护代码。同时,规范也能减少代码中的错误和缺陷,提高软件的整体质量。加强团队协作:在团队开发项目中,不同的程序员可能采用不同的编程风格和习惯。通过遵循统一的开发规......
  • netty核心流程(一):服务端如何建立连接
    为了接收连接请求,Netty服务端应该做些什么事情?根据JavaNIO的知识,服务端在准备接收客户端连接之前做了下面几个工作,我们可以带着问题往下看。服务端对连接请求是如何初始化的?如何把用户定义的处理逻辑childHandler加入到Netty的处理流程里?如何在Socket上绑定一个端......
  • SSRF-labs-master靶场
    目录file_get_content.phpsql_connect.phpdownload.phpdns-spoofing.phpdns_rebinding.php访问链接http://127.0.0.1/SSRF/#file_get_content.php在编程语言中,有一些函数可以获取本地保存文件的内容。这些功能可能能够从远程URL以及本地文件如果没有对输入内容......
  • Nuxt.js必读:轻松掌握运行时配置与 useRuntimeConfig
    title:Nuxt.js必读:轻松掌握运行时配置与useRuntimeConfigdate:2024/7/29updated:2024/7/29author:cmdragonexcerpt:本文详细介绍了Nuxt.js中的运行时配置功能,包括定义和使用运行时配置的方法,以及如何通过useRuntimeConfig访问配置。同时,讲解了环境变量与.env文件的使......
  • Nuxt.js必读:轻松掌握运行时配置与 useRuntimeConfig
    title:Nuxt.js必读:轻松掌握运行时配置与useRuntimeConfigdate:2024/7/29updated:2024/7/29author:cmdragonexcerpt:本文详细介绍了Nuxt.js中的运行时配置功能,包括定义和使用运行时配置的方法,以及如何通过useRuntimeConfig访问配置。同时,讲解了环境变量与.env文......
  • Nuxt.js必读:轻松掌握运行时配置与 useRuntimeConfig
    title:Nuxt.js必读:轻松掌握运行时配置与useRuntimeConfigdate:2024/7/29updated:2024/7/29author:cmdragonexcerpt:本文详细介绍了Nuxt.js中的运行时配置功能,包括定义和使用运行时配置的方法,以及如何通过useRuntimeConfig访问配置。同时,讲解了环境变量与.env文......