React SSR

一、为什么需要SSR呢?

单页面富应用的局限:

  • 之前我们开发的应用程序,如果直接请求可以看到上面几乎没有什么内容。
    在这里插入图片描述

  • 但是为什么我们页面可以看到大量的内容呢?

  • 因为当我们请求下来静态资源之后会执行JS,JS会去请求数据,并且渲染我们想要看到的。

但是这个过程存在另外两个问题:

  • 问题一:首屏显示的速度较慢;
  • 问题二:不利于SEO的优化;

如何解决这个问题呢?

  • 采用服务端渲染;

二、认识SSR和同构?

SSR(Server Side Rendering,服务端渲染),指的是页面在服务器端已经生成了完成的HTML页面结构,不需要浏览器解析;

对应的是CSR(Client Side Rendering,客户端渲染),我们开发的SPA页面通常依赖的就是客户端渲染;

早期的服务端渲染包括PHP、JSP、ASP等方式,但是在目前前后端分离的开发模式下,前端开发人员不太可能再去学习PHP、JSP等技术来开发网页;

不过我们可以借助于Node来帮助我们执行JavaScript代码,提前完成页面的渲染;

什么是同构?
一套代码既可以在服务端运行又可以在客户端运行,这就是同构应用。
在这里插入图片描述

同构是一种SSR的形态,是现代SSR的一种表现形式。

  • 当用户发出请求时,先在服务器通过SSR渲染出首页的内容。
  • 但是对应的代码同样可以在客户端被执行。
  • 执行的目的包括事件绑定等以及其他页面切换时也可以在客户端被渲染;

三、使用React SSR

使用React SSR主要有两种方式:

  • 方式一:手动搭建一个SSR框架;
  • 方式二:使用已经成熟的SSR框架:Next.js

安装Next.js框架的脚手架:

npm install –g create-next-app

创建Next.js项目

create-next-app next-demo

package.json文件:
在这里插入图片描述

四、首页的展示

Next.js默认已经给我们配置好了路由映射关系:

  • 路径和组件的映射关系;
  • 这个映射关系就是在pages中配置相关的组件都会自动生成对应的路径;

默认page/index.js是页面的默认路径:
在这里插入图片描述

五、定义关于页面和页面跳转

定义About页面

在这里插入图片描述

从Home页面跳转到About页面

在这里插入图片描述

六、Layout组件

在这里插入图片描述

我们发现home和about是两个相互独立的组件:

  • 如果它们有一些公共的内容:比如头部、尾部是一样的,是否每个地方都需要写一遍呢?

有两种解决方案:

  • 方案一:自定义一个Layout的组件,将公共的内容放到Layout中;
    在这里插入图片描述

  • 方案二:在_app中编写公共部分的内容;
    在这里插入图片描述

七、Next.js支持各种样式

方式一:全局样式引入
在这里插入图片描述

方式二:module.css
在这里插入图片描述

方式三:默认集成styled-jsx
在这里插入图片描述

方式四:其他css in js方案,比如styled-components

  • 引入相关的依赖;
yarn add styled-components
yarn add -D babel-plugin-styled-components
  • 创建和编辑 .babelrc文件
    在这里插入图片描述

在这里插入图片描述

八、路由的补充

路由的嵌套(子路由):
文件夹的嵌套,最后就可以形成子路由;
在这里插入图片描述
在这里插入图片描述

路由的传参:

  • Next.js中无法通过 /user/:id的方式传递参数;
  • 只能通过 /user?id=123的方式来传递参数;

传递参数有两种办法:

  • Link中的路径;
    在这里插入图片描述

  • Router.push(pathname, query)
    在这里插入图片描述

九、请求数据 - getInitialProps

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470221.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux 命令 读phy_PHY LINUX (转载整理)

每每分析网络问题的时候,总要梳理层次关系,本想自己写一个关于PHY的文档,找到网上有人写的一篇比较好,所以转载下来,仅供初学者参考。以太网 MAC(链路层)PHY(物理层/RTL8201F,88E1111);集成型DM9000,RTL813…

Laravel框架开发规范-修订版

1.PHP编码规范 1.1 标签 PHP 程序可以使用<?php ?>或<? ?>来界定PHP代码 在HTML 页面中嵌入纯变量时&#xff0c;使用<? ?>这样的形式 纯PHP类文件&#xff0c;文件开始标签使用<?php&#xff0c;闭合标签?>必须省略 1.2 编码 PHP文件必须使用…

vue显示两位小数的方法_Vue toFixed保留两位小数的3种方式

Vue toFixed保留两位小数的3种方式第一种&#xff1a;直接写在js里面&#xff0c;这是最简单的val.toFixed(2)第二种&#xff1a;在ElementUi表格中使用第三种&#xff1a;在取值符号中使用 {{}}定义一个方法towNumber(val) {return val.toFixed(2)}使用{{ towNumber(row.equiV…

Tyvj 1176 火焰巨魔的惆怅

Tyvj 1176 火焰巨魔的惆怅 背景 TYVJ2月月赛第一道巨魔家族在某天受到了其他种族的屠杀&#xff0c;作为一个英雄&#xff0c;他主动担任了断后的任务&#xff0c;但是&#xff0c;在巨魔家族整体转移过后&#xff0c;火焰巨魔却被困住了&#xff0c;他出逃的方式也只有召唤小火…

Vue3 组件通信学习笔记

一、父子组件之间通信 父子组件之间如何进行通信呢&#xff1f; 父组件传递给子组件&#xff1a;通过props属性&#xff1b;子组件传递给父组件&#xff1a;通过$emit触发事件&#xff1b; 1.1 父组件传递给子组件 在开发中很常见的就是父子组件之间通信&#xff0c;比如父…

js调用vlc_如何使用HTML5或JavaScript查看RTSP流,而不使用Real Player插件上的VLC插件等插件?...

The idea is to develop a cross-platform, standalone application that could play a video, streamed over RTSP, using HTML5 or JavaScript or any other web technology.解决方案RTSP is a protocol on the same level as HTTP. Its impossible to do RTSP via HTTP.The …

HDU-3729 二分匹配 匈牙利算法

题目大意&#xff1a;学生给出其成绩区间&#xff0c;但可能出现矛盾情况&#xff0c;找出合理组合使没有说谎的人尽可能多&#xff0c;并按maximum lexicographic规则输出组合。 //用学生去和成绩匹配&#xff0c;成绩区间就是学生可以匹配的成绩#include <iostream> #i…

Vue3 slot插槽——(默认插槽、具名插槽、作用域插槽)

一、认识插槽Slot 在开发中&#xff0c;我们会经常封装一个个可复用的组件&#xff1a; 前面我们会通过props传递给组件一些数据&#xff0c;让组件来进行展示&#xff1b;但是为了让这个组件具备更强的通用性&#xff0c;我们不能将组件中的内容限制为固定的div、span等等这…

dbcc dbreindex server sql_DBCC DBREINDEX重建索引提高SQL Server性能

DBCC DBREINDEX重建索引提高SQL Server性能[转载]大多数SQL Server表需要索引来提高数据的访问速度&#xff0c;如果没有索引&#xff0c;SQL Server要进行表格扫描读取表中的每一个记录才能找到索要的数据。索引可以分为簇索引和非簇索引&#xff0c;簇索引通过重排表中的数据…

Vue动态组件和组件缓存

一、切换组件案例 比如我们现在想要实现了一个功能&#xff1a; 点击一个tab-bar&#xff0c;切换不同的组件显示&#xff1b; 这个案例我们可以通过两种不同的实现思路来实现&#xff1a; 方式一&#xff1a;通过v-if来判断&#xff0c;显示不同的组件&#xff1b; 方式二…

hidl 原理分析_一个 health service 不生效问题引出的一点知识

从 Android P 开始&#xff0c;Google 开始推荐厂家再定制一个 health 。前不久遇到一个定制 health 中的信息未成功反应到 Framework 的问题&#xff0c;在分析解决问题的过程中&#xff0c;学习到了一点新知识&#xff0c;所以就在这篇文章里根据解决问题的流程做一个小小的记…

比较list集合相等的方法

1. 内容相同,不管顺序! public static boolean isListContentEquals(List<String> src, List<String> des){return src.containsAll(des) && des.containsAll(src);} 2.内容和顺序都完全一样 方法1: public static boolean isListsCompletelyEqual(List<…

Webpack的代码分包Vue3中定义异步组件分包refs的使用

一、默认的打包过程&#xff1a; 默认情况下&#xff0c;在构建整个组件树的过程中&#xff0c;因为组件和组件之间是通过模块化直接依赖的&#xff0c;那么webpack在打包时就会将组件模块打包到一起&#xff08;比如一个app.js文件中&#xff09;&#xff1b; 这个时候随着项…

经典JS

用apply把document当作this传入getId函数&#xff0c;帮助“修正”this; document.getElementById (function (func) {return function () {return func.apply(document, arguments);} })(document.getElementById);//调用 var getId document.getElementById; var div getI…

组件的v-model Mixin extends

一、组件的v-model 前面我们在input中可以使用v-model来完成双向绑定&#xff1a; 这个时候往往会非常方便&#xff0c;因为v-model默认帮助我们完成了两件事&#xff1b;v-bind:value的数据绑定 和 input的事件监听&#xff1b; 如果我们现在封装了一个组件&#xff0c;其…

springmvcget中文乱码_解决SpringMVC Controller 接收页面传递的中文参数出现乱码的问题...

新配置一个spring的MVC项目&#xff0c;发现对Get请求的中文参数出现了乱码&#xff1a;查看了SpingMVC中关于编码的配置(在web.xml中)&#xff0c;如下&#xff1a;encodingFilterorg.springframework.web.filter.CharacterEncodingFilterencodingutf-8forceEncodingtrueencod…

SQL学习之SELECT子句顺序

下面来总计下之前的随笔中所说过的所有的SELECT子句的顺序。 子句            说明            是否必须使用 SELECT 要返回的列或者表达式 是 FROM 从中检索数据的表 …

Vue3过渡动画实现

一、认识动画 在开发中&#xff0c;我们想要给一个组件的显示和消失添加某种过渡动画&#xff0c;可以很好的增加用户体验&#xff1a; React框架本身并没有提供任何动画相关的API&#xff0c;所以在React中使用过渡动画我们需要使用一个第三方库react-transition-group&…

linux退出 putty_使用putty远程连接linux防止关闭putty程序就停止

如题&#xff1a;有时候我们使用putty连接linux的时候执行某个命令运行程序的时候&#xff0c;关闭putty就会出现应用程序也关闭的情况&#xff1b;这里建议就使用如下命令nohup youcommand &(&可加可不加)这个时候默认会在你当前目录创建一个nohup中创建一个nohup.out…

在Linux下不使用密码远程登陆其他Linux

有时需要再一台Linux上登陆其他Linux服务器&#xff0c;通常可以直接使用SSH命令&#xff0c;加入两台服务器一台服务器A&#xff0c;IP地址192.168.1.2&#xff0c;另一 台服务器B&#xff0c;IP地址192.168.1.3&#xff0c;如果想从A服务器使用root用户登陆B服务器只需要在A服…