问题标签 [server-side-rendering]

我想在服务器端渲染中使用 Vue ，但模板内的内容数据必须从其他 CMS 服务器请求。

由于axios.get是异步请求，服务器将在请求完成之前发送空内容。

使用 curl 请求内容：

如何确保它可以在服务器端使用 CMS 内容数据呈现？

我想了解 AWS Lambda 和 React.js 是否是具有服务器端渲染的无服务器单页应用程序的高性能解决方案。也许有人已经在生产中使用过它，并且可以分享它的工作情况如何好坏。

此外，有趣的是如何轻松/困难地构建和支持基于 AWS Lambda 的路由和服务器端渲染的 SPA。

我有两个从 overpassturbo-eu 提取的大型 json/geojson 文件。

我正在尝试在 OSM 上将此数据集绘制/添加为图层。

我需要过滤不同缩放级别的数据集。

这些文件太大，无法有效下载整个文件以对数据集进行客户端分析。

有没有一种有效的方法在服务器端过滤这些数据集？

我正在尝试使我的 Vue 应用程序具有服务器端渲染。我正在使用vue-server-renderer（https://www.npmjs.com/package/vue-server-renderer）。客户端渲染工作正常。

我的应用程序使用vue-router和axios

这是我的server.js：

getInfo()是获取服务器数据的方法。

这里是getInfo()：

我的服务器条目是：

但是，我很快意识到，所有组件router.getMatchedComponents()都没有$route或$set。因此，该方法getInfo()停止工作。

https://router.vuejs.org/en/api/router-instance.html的文档很短，没有提供太多信息：

router.getMatchedComponents()

返回与当前路由匹配的组件（定义/构造函数，而不是实例）的数组。这主要用于在服务器端渲染期间执行数据预取。

我该如何解决这个问题？

require有没有什么好方法可以在没有 Babel钩子的情况下使用服务器端渲染？

现在我正在使用它jsx在服务器上编译和 ES6 模块导入/导出（因为它们在 中尚不支持Node.js）。我想我可以放弃进口/出口require，但我想留下来jsx。我遇到的 require hook 的主要问题是调试和服务器启动缓慢。

我知道有些人使用 gulp 加载源映射来解决调试问题，但这对我来说似乎有点矫枉过正。

所以...

我遇到了这个问题......

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

...而且我多次发现关于“导出默认值”的相同响应。希望我的问题的解决方案是关于我的 TypeScript 编译、ECMA 版本兼容性等的简单方法，但感谢任何帮助。

tsconfig.json

我意识到我没有指定“目标”，因此tsc默认为“es3”，我认为这是最好的向后兼容性。我尝试更新到“es5”，但这并没有解决我的问题。

服务器.ts

由于我在 tsconfig.json 中为“jsx”属性指定了“react”，因此我编译的文件将是 .js，但仍将包含 React.createElement 等调用，因此我为 JS 文件指定了我的快速视图引擎使用合并项目的反应引擎。以前我使用的是express-react-views，这里对我的策略的任何输入都会有所帮助。

索引.tsx

索引.ts

...任何帮助深表感谢！

这是我的快速服务器设置

现在，当我在 localhost:3000/ 启动我的应用程序时，它可以在所有路由正常工作的情况下正常工作，但是当我尝试直接在 localhost:3000/login 或其他一些路由上运行时，我得到一个Cannot GET /login错误......

我现在不想将服务器端渲染与反应中间件（我以前使用过）一起使用，所以有什么办法让它工作吗？

所以我正在开发 POC 应用程序，它需要有 SEO 优化的内容（=== 在服务器上呈现）。但是在同一条路线中，可能会有来自不同来源的动态数据，并且可能需要一段时间才能捕获所有这些数据。SEO 不需要此动态数据，因此将实施异步加载。

到目前为止，我所拥有的看起来像这样（请记住，这只是示例）：

使用 ExpressJS 的 server.js（它的一小部分）：

// server.js app.get('*', (req, res) => { ReactRouter.match({ routes, location: req.url }, (err, redirectLocation, renderProps) => {

所以你看到有 preRenderMiddleware 它返回已解决的 Promise ，这是我认为我可能错的部分：

所以我的问题是从服务器获取预期的标记 - 在 AboutContainer this.props.data 正在获取数据。但是，当客户端启动时， this.props.data 是未定义的。

任何人都可以指出一些好的解决方案吗？我确定我不是第一个遇到这个问题的人。我遇到了一些解决方案，但是客户端上所有重新请求的相同数据都是我希望避免的，这又会有点奇怪。

我也不想为此使用 Redux / 任何 Flux。

有什么想法吗？

我有一个 Vue.js 应用程序，它使用服务器端渲染 (SSR)，然后是客户端水合，效果很好。我喜欢构建同构 javascript，并认为这是未来的方式。

但还有一个问题我想解决。这是一个简单的图表：

首先我们检查是否有缓存的 HTML 响应

如果我们没有缓存，那么我们：

1. 执行服务器端渲染 (SSR) 以从 vue.js 应用程序渲染 HTML
2. 然后我们保存到缓存
3. 并向客户端发送响应
4. 此时我们在哪里安装 vue.js 应用程序并进行客户端水合。

这个流程我已经下来并且效果很好。我想弄清楚蓝色的步骤是如何做的。

如果我们有缓存，我想：

1. 加载 html 并像客户端水合一样挂载 vue.js 应用程序并更新缓存的 html 片段，然后仅对当前用户是唯一的（即帐户信息、喜欢、关注等）
2. 向客户端发送响应
3. 然后就像以前一样进行客户端水合以使页面具有交互性。

我做了一些研究，但找不到任何有关服务器端水合的信息。我什至研究了其他同构框架，例如 react 和 angular 2，看看他们是否有解决方案但找不到。

我不介意建立这样的东西，但我需要朝着正确的方向努力，所以如果有人在做这种事情或有任何建议，非常感谢。

我一直想学习 NodeJS 以便能够在服务器端和客户端运行相同的代码。我将 NodeJS 与 Express 和 EJS 一起使用。所以。我有一个 .ejs 页面，其中包含大量 HTML、JS、CSS 和少量模板。为了正义，让它变成这样：

the_list-->some.ejs

在服务器上进行一些渲染后，我们有一个完美的列表。

所以。现在我想在客户端重新渲染它。我提出了一些 ajax 请求，现在我在 the_list 中有新项目。什么是正确的方法？