Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >React + SSR:处理需要先获取数据的组件的正确方法

问React + SSR:处理需要先获取数据的组件的正确方法
EN

Stack Overflow用户

提问于 2020-10-28 23:53:51

回答 1查看 139关注 0票数 1

我目前有一个React应用程序，我想使用SSR。除了一个组件之外，所有组件都是非常静态的内容，这使得SSR变得非常简单。现在，除了组件之外的所有内容都呈现得很好。

我的问题是，如何渲染这个需要首先获取数据的组件？因为它是一个呈现的复杂SVG，所以我的想法是，一旦数据传入，让它“更新”是一个糟糕的举动，如果没有数据(带有错误消息)，它就不存在会更好。

因此，我的计划是:我可以向组件添加一个属性，以传递来自父组件的数据，而不是仅将其作为内部状态。因此，如果传递了数据，则不需要组件中的fetch请求。从那里我可以做的是获取应用程序的静态包输出，当页面被请求时，服务器将请求正确的数据，就像组件一样。一旦接收到数据，服务器就可以使用regex从捆绑包中获取组件，将数据作为道具添加，呈现组件，并将其与已呈现的其余静态内容放回一起。

这是正确的方法吗？这感觉有点复杂，但可能就是这样做的。我没有把握。

server-side-rendering

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-11-04 12:28:57

你的直觉是正确的。在当前的React (17.0)中，在组件内部使用数据获取进行SSR是相当麻烦的。

需要在概念层面上实现的是，所有数据依赖关系都需要预先知道，即。在调用ReactDOM的render之前。这样，人们可以以同步的方式访问数据，从而允许在服务器上进行一遍渲染。

我不太理解你的想法“用正则表达式从捆绑包中抓取组件”。解决数据依赖问题的一种方法是将数据从根组件注入React树(即，ReactDOM.renderToString(<App componentStaticData={data} />))，并让数据相关组件意识到这样一个事实，即它只能从那里获取数据，而不是进行(异步)调用。需要注意的是，useEffects不是在服务器上执行的。

获取所有数据依赖关系的另一个想法是进行两遍渲染。首先使用一个方法来收集所有使用的资源，然后等待它们的完成，并将它们作为静态数据注入到send传递中。

第三种方法是使用React框架之一，它提供了开箱即用的SSR。你可以看看Next.js或Gatsby。根据您的设置，这可能是实现SSR的最简单或最困难的方法。

票数 2

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64582977

复制

相关文章

重叠时间段问题优化算法详解

这是一个实际业务需求中的问题。某一直播业务表中记录了如下格式的用户进出直播间日志数据：

用户1148526

2019/08/29

5.8K0

MariaDB 10.0 从已有数据库创建新的从库

云数据库 SQL Server 数据库 sql

已有主库需要持续为用户提供服务，因此不能够停机或者重启，所以需要采用热备份的方式创建一个当前数据库的副本。

用户2131907

2019/05/22

2K0

MariaDB 10.0 从已有数据库创建新的从库

matlab计算多重复杂多边形重叠面积

matlab https 网络安全 html

最近在学习中遇到了求多边形图像重叠面积问题，经查阅资料发现polyshape函数可以解决此问题，下面总结一下本次学习的心得：

巴山学长

2021/07/30

2.5K0

一个有趣的时间段重叠问题

编程算法 postgresql sql https 网络安全

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wzy0623/article/details/79152961

用户1148526

2019/05/25

4.4K0

OpenGL绘制多边形边框线

利用OpenGL如何在绘制多边形的时候同时绘制其变现呢？网上一种解决方案是利用glPolygonMode，将多边形绘制两次，一次绘制面，一次绘制边。这种方案理论上是可行的（我没有试过），但是OpenGL要进行两次绘制，效率上明显是不高的。

卡尔曼和玻尔兹曼谁曼

2019/01/22

2.7K0

（数据科学学习手札65）利用Python实现Shp格式向GeoJSON的转换

编程算法 json

　　Shp格式是GIS中非常重要的数据格式，主要在Arcgis中使用，但在进行很多基于网页的空间数据可视化时，通常只接受GeoJSON格式的数据，众所周知JSON（JavaScript Object Nonation）是利用键值对+嵌套来表示数据的一种格式，以其轻量、易解析的优点，被广泛使用与各种领域，而GeoJSON就是指在一套规定的语法规则下用JSON格式存储矢量数据，本文就将针对GeoJSON的语法规则，以及如何利用Python完成Shp格式到GeoJSON格式的转换进行介绍。

Feffery

2019/07/10

2.7K0

（数据科学学习手札65）利用Python实现Shp格式向GeoJSON的转换

Oracle创建新undo表空间最佳实践(包含段检查)

云数据库 SQL Server

在处理一则ORA-600 [4194]案例时，参考MOS文档：Step by step to resolve ORA-600 4194 4193 4197 on database crash (文档 ID 1428786.1)

Alfred Zhao

2019/05/22

7220

多个时间段中筛选识别并返回重叠时间段区间【Java】

java date import public return

直接一个类实现。不用再建个对象来存储。支持String，Date ,LocalDate。

Diuut

2023/06/10

9520

numpy简单应用---等值线(多边形)平滑

地图模型数据

风向条件下的气体扩散模型计算得到的数据，相当于等值线需要在地图上展示。如下图，可以看到，离中心最近的多边形毛糙锯齿严重。

MiaoGIS

2020/11/04

1.4K0

numpy简单应用---等值线(多边形)平滑

CGAL 计算两个凸多边形相交的面积

cgal cout point polygon 异常

我正在使用 CGAL 计算两个凸多边形相交的面积。在对 this 的接受答案中发布了执行此操作的简短演示代码。问题。但是，当我修改该代码以使用我感兴趣的多边形时，CGAL 从 CGAL::intersection() 例程的深处抛出运行时异常。

用户3519280

2023/07/06

4180

所谓的代码段、数据段

c++data readonly text 面试

一般面试C++，都会很无聊的问到虚拟函数的实现机制，接着就会问到vtable放在哪里 – 实现细节中的细节，我个人觉得这个除了卖弄没啥大意义，但面试嘛，一般就这吊样。

全栈程序员站长

2021/12/23

7830

nest http 编程算法云数据库 postgresql 数据库

PostGIS是一个空间数据库，空间数据库像存储和操作数据库中其他任何对象一样去存储和操作空间对象。

小石头

2022/11/10

6.3K0

数据地图多图层对象的颜色标度重叠问题解决方案

一篇旧文，解决一个困扰已经的小技术问题，权当是学习ggplot2以来的整理回顾与查漏补缺。 ---- 今天这一篇是昨天推送的基础上进行了进一步的深化，主要讲如何在离散颜色填充的地图上进行气泡图图层叠加。为了使得案例前后一致，仍然使用昨天的数据集。加载包： library("ggplot2") library("plyr") library("maptools") library("sp") library("ggthemes") 导入中国省界地图： china_map<-readShapePoly("

数据小磨坊

2018/04/11

1.7K0

数据地图多图层对象的颜色标度重叠问题解决方案

python 通过threading多线

ssh tcp/ip python

#!/usr/bin/env python #coding=utf-8 import paramiko import time,datetime,threading def ssh(ip,user,passwd,command): ssh = paramiko.SSHClient() ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy()) try: ssh.connect(ip,port=16333,username=user,password=passwd) except paramiko.AuthenticationException: #print "验证失败，用户名或密码错误." return 0 except: #print 'ip',"主机不可达。" return 2 stdin, stdout, stderr = ssh.exec_command(command) lines = [line.strip() for line in stdout.readlines()] data_include_firstline = "".join(lines) data_no_firstline = "".join(lines[1:]) return data_include_firstline def sshcmd(src,linerange): i = 0 for line in open(src): i += 1 if i in range(linerange[0],linerange[1]+1): ip = line.strip() user = 'root' port = 16333 passwd = '123qwe' command = 'hostname' result = ssh(ip,user,passwd,command) if result == 0: result = '验证失败，用户名或密码错误.' elif result == 2: result = '主机不可达.' print i,ip,result def main(num,src): global count, mutex linesum = sum(1 for line in open(src)) quotient = linesum/num threads = [] # 创建一个锁 mutex = threading.Lock() # 先创建线程对象 for k in xrange(1, num+1): if k == num: linerange = quotient*(k-1)+1,linesum else: linerange = quotient*(k-1)+1,quotient*k threads.append(threading.Thread(target=sshcmd, args=(src,linerange))) # 启动所有线程 for t in threads: t.start() # 主线程中等待所有子线程退出 for t in threads: t.join() starttime = datetime.datetime.now() if __name__ == '__main__': # 创建10个线程 main(10,'ip.txt') endtime = datetime.datetime.now() print "time span",endtime-starttime

py3study

2020/01/08

8520

Junit 多线测试问题

问题在使用Junit测试时，发现在测试方法中启动新的线程，结果新开启的线程未执行，测试方法就结束了。难道Junit不支持多线程测试？示例如下： public class ThreadTest { @Test public void testSleep() { Thread t = new Thread(()-> { try { Thread.sleep(1000); } catch (Exce

java404

2018/05/18

1.4K0

跟牛老师一起学WEBGIS——GIS基础（空间数据）

entity gis label point tuples

空间数据模型可以分为三种：场模型：用于描述空间中连续分布的现象；要素模型：用于描述各种空间地物；网络模型：可以模拟现实世界中的各种网络；

牛老师讲GIS

2020/08/10

1.5K0

空间数据的拓扑处理

拓扑主要用于确保空间关系并帮助其进行数据处理，在很多情况下拓扑也用于分析空间关系，概括下来就两点，一是分析有无错误，二是利用拓扑进行编辑。

小孙同学

2022/01/17

2.3K0

TBase-手工创建数据多活

云数据库 postgresql 云推荐引擎数据库 sql

利用数据多活同步mc.public.test_repl到postgres.public.test_repl的数据。

腾讯云数据库 TencentDB

2020/12/07

7600

分享两个线+标注的SLD样式

概述：本文给大家分享两个比较好看的线+标注的SLD样式。效果：样式1 样式2 3、sld样式 a、样式1 <?xml version="1.0" encoding="GBK"?> <sld:St

牛老师讲GIS

2018/10/23

1.3K0

Excel超级表：创建表时不能相互重叠？

大海：可以直接在原来的“表2”上扩展啊。表格的右下角有个蓝色小弯角的标志，鼠标放在上面，就会变成可扩展的鼠标图形，然后按住鼠标左键拖动就可以调整（扩展或缩小）这个表格所包含的数据区域了。如下图所示：

大海Power

2021/08/30

2.7K0

相似问题

如何从封闭多段线创建多边形

121

GMSURLTileLayer与多段线重叠

21

从KML文件创建多段线

10

从数据帧解码多段线

24

使用多段线计算多边形面积

13

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例