标签: server-side-rendering

Angular 5 Universal在服务器端呈现期间等待http请求返回

我有一个使用ngExpressEngine服务的Angular 5应用程序(遵循Angular Universal启动项目).我的应用程序有一个组件,它发出HTTP请求以显示一些数据.一切正常,但当我使用fetch作为谷歌机器人时,它返回渲染的页面,但没有数据.是否有任何使ngExpressEngine服务器在将页面呈现给用户之前等待HTTP请求?

typescript server-side-rendering angular-universal angular

9
推荐指数
1
解决办法
822
查看次数

服务器端渲染的React应用程序因加载而崩溃

我正在使用react-boilerplate(使用react-router,sagas,express.js)作为我的React应用程序,并且在它之上我添加了SSR逻辑,这样一旦它收到HTTP请求,它就会根据URL呈现反应组件到字符串并发送HTML字符串返回客户端.

虽然反应呈现在服务器端发生,但它也fetch通过传真向一些API(基于URL的最多5个端点)发出请求,以便在组件实际呈现组件之前获取组件的数据.

如果我同时向Node服务器发出几个请求,那么一切都很好,但是一旦我模拟了100多个并发请求的加载并且它开始处理它,那么在某些时候它会崩溃而没有任何异常的迹象.

我在尝试调试应用程序时注意到的是,一旦节点服务器开始处理100多个传入请求,它就会同时向API发送请求,但在停止堆叠这些请求之前不会收到任何实际响应.

用于在服务器端呈现的代码:

async function renderHtmlDocument({ store, renderProps, sagasDone, assets, webpackDllNames }) {
  // 1st render phase - triggers the sagas
  renderAppToString(store, renderProps);

  // send signal to sagas that we're done
  store.dispatch(END);

  // wait for all tasks to finish
  await sagasDone();

  // capture the state after the first render
  const state = store.getState().toJS();

  // prepare style sheet to collect generated css
  const styleSheet = new ServerStyleSheet();

  // 2nd render phase - the sagas triggered …
Run Code Online (Sandbox Code Playgroud)

node.js express reactjs server-side-rendering ssr

9
推荐指数
1
解决办法
1146
查看次数

renderStatic期间的反应头盔混合场

我正在运行React应用程序的服务器端渲染。我正在express为此目的使用。整个服务器端渲染代码如下所示:

import * as React from "react"
import * as ReactDOMServer from "react-dom/server"
import * as express from "express"
import { StaticRouter } from "react-router-dom"
import walker = require("react-tree-walker")
import { useStaticRendering } from "mobx-react"

import Helmet from "react-helmet"
import Provider from "../src/Provider"
import { StaticRouterContext } from "react-router"
import version = require("../version")

var _template: string = require(`../dist/${version.v()}/index.html`)

interface IRenderResponse {
    statusCode: number,
    template: string,
    redirect?: string
}

const run = (url: string, locale?: string): Promise<IRenderResponse> => { …
Run Code Online (Sandbox Code Playgroud)

node.js reactjs server-side-rendering react-helmet

9
推荐指数
1
解决办法
324
查看次数

部署时使Google Cloud Function的Firebase缓存无效

我最近通过Cloud Functions和Firebase Hosting实现了SSR。

构建JS捆绑包时,它会收到一个缓存突发后缀(main.1.js)。

在我的函数内部,我有以下代码用于缓存Cloud Function的结果

res.set('Cache-Control', 'public, max-age=300, s-maxage=300');
Run Code Online (Sandbox Code Playgroud)

在部署期间,我先部署托管,然后再部署云功能

firebase deploy --only hosting:production && gcloud functions deploy ssr --runtime nodejs8 --trigger-http --source dist/server
Run Code Online (Sandbox Code Playgroud)

Firebase托管部署替换main.1.jsmain.2.js

由于缓存破裂,文件现在有所不同(main.2.js),但是由于云功能又被缓存了5分钟-访问网站时出现错误(因为main.1.js该功能的缓存版本中已引用该功能不再可用) 。

您将如何解决此问题?我可以有两个活动的部署并一个接一个地激活吗?

caching firebase firebase-hosting server-side-rendering google-cloud-functions

9
推荐指数
1
解决办法
303
查看次数

在服务器端呈现的 React 项目中使用 Headers 时出现“ReferenceError: Headers is not defined”

我正在 React 中设置一个新应用程序,我希望它在服务器端呈现。不幸的是,我无法使用Headers,因为它不断抛出错误“ReferenceError: Headers is not defined”。

我已经尝试通过添加以下内容来添加标题:

import fetch from 'node-fetch';

global.fetch = fetch
global.Headers = fetch.Headers;
Run Code Online (Sandbox Code Playgroud)

尽管如此,这仍然会引发错误。

这是我目前如何实现标头的示例:

const defaultOptions = {
  method: METHOD,
  headers: new Headers({
    'Content-type': 'application/json',
    'X-Request-ID': new Date().getTime().toString(),
  }),
};
Run Code Online (Sandbox Code Playgroud)

有谁知道我缺少什么来构建和启动它?

reactjs fetch-api server-side-rendering

9
推荐指数
3
解决办法
2万
查看次数

如何在 Vue 3 中使用 SSR

我有一个带有服务器端渲染的工作 Vue 2 应用程序。现在我正在尝试升级到 Vue 3 但卡在 SSR 部分因为 vue-server-renderer 包抛出以下错误:

Vue packages version mismatch: - vue@3.0.0 - vue-server-renderer@2.6.12 This may cause things to work incorrectly. Make sure to use the same version for both.
Run Code Online (Sandbox Code Playgroud)

但是 vue-server-renderer 没有 3.0.0 版本...

通过谷歌搜索,我在 vue-next 存储库中发现了这个问题:https : //github.com/vuejs/vue-next/issues/1327

但是对我来说,vue 3 版本如何实现 SSR 还是不太清楚。已经可以了吗?是否有如何在 Vue 3 中使用 SSR 的示例?

vue.js server-side-rendering

9
推荐指数
1
解决办法
7431
查看次数

如何手动将 svelte 组件编译为 sapper/svelte 生成的最终 javascript 和 css?

我们公司生产了一个用 svelte/sapper 编写的自动化框架。一项功能是开发人员可以创建自定义 ui 小部件,目前使用纯 js/html/css 和我们的客户端 api。这些小部件存储在数据库中而不是文件系统中。

我认为允许他们将小部件创建为 svelte 组件将是一个很大的优势,因为它在一个位置包含所有标记、js 和 css,并将为他们提供 svelte 反应性的所有好处。

我已经创建了一个使用 svelte 的服务器 API 编译组件的端点,但这似乎只是生成了一个准备好 rollup-plugin-svelte/sapper/babel 来完成生成浏览器可以使用的东西的工作的模块。

如何手动将 svelte 组件编译为 sapper/svelte 生成的最终 javascript 和 css。

server-side-rendering svelte sapper

9
推荐指数
2
解决办法
1942
查看次数

使用 getServerSideProps 获取内部 API?(下一个.js)

我是 Next.js 的新手,我正在尝试理解建议的结构并处理页面或组件之间的数据。

例如,在我的页面中home.js,我获取了一个调用的内部 API /api/user.js,它从 MongoDB 返回一些用户数据。我通过使用fetch()从 inside 调用 API 路由来做到这一点getServerSideProps(),它在一些计算后将各种道具传递给页面。

根据我的理解,这对 SEO 有好处,因为道具在服务器端被获取/修改,页面让它们准备好呈现。但后来我的Next.js文档,你不应该用在阅读fetch()到所有的API路线getServerSideProps()。那么我应该怎么做才能遵守良好的实践和良好的 SEO?

我没有home.js在 API 路由本身中进行所需计算的原因是我需要来自这个 API 路由的更多通用数据,因为我也会在其他页面中使用它。

我还必须考虑缓存,哪个客户端使用 SWR 来获取内部 API 非常简单,但服务器端我还不确定如何实现它。

home.js

export default function Page({ prop1, prop2, prop3 }) {
        // render etc.
}

export async function getServerSideProps(context) {
  const session = await getSession(context)
  let data = null
  var aArray = [], bArray = [], cArray = []
  const { …
Run Code Online (Sandbox Code Playgroud)

javascript node.js fetch-api server-side-rendering next.js

9
推荐指数
1
解决办法
7532
查看次数

如何判断网站是否使用 next.js?

通过使用React Developer Tools可以很容易地判断网站是否使用 ReactJS 。

然而,我知道一个使用ReactJS和服务器端渲染的网站(整个页面是用React组件构建的,但页面源包含整个HTML)。是否可以判断该网站是否使用Next.js特别用于 SSR?

Next.js 是否在前端留下任何可检测到的痕迹?

reactjs server-side-rendering next.js

9
推荐指数
3
解决办法
9874
查看次数

如何在 Next.js 中保留 redux 状态而不阻塞 SSR?

我有一个无服务器 Next.js 应用程序,其中有一些组件依赖于从 redux 存储传递下来的数据。目前,我的方法需要 redux-persist 在用户导航时保存存储,否则如果存储中的数据不存在,上述组件将崩溃。我遇到的问题是,包裹整个应用程序的 redux-persist 的 PersistGate 阻止了对站点的外部请求访问每个页面内的动态元标记。像 metatags.io 这样的工具只能看到来自 persistgate 的加载组件。

如果我删除门,那么标头标签将呈现良好,但 redux 状态不再持久,如果用户刷新某些页面上的页面,则会导致问题。

我已经尝试了此 github 问题中讨论的一些方法,但有条件地包装 persistgate 仍然会导致问题,并且“next/head”组件在实际主体而不是头部内呈现。

我对 Next.js 还很陌生,它提供的 SEO 改进是我选择它而不是普通 React 的原因。我愿意接受一些不涉及 redux-persist 以及可能使用本地存储的模式建议。

这是 _app.js 目前的布局:

import App from 'next/app';
// Redux:
import { useStore } from 'redux/store';
import { Provider } from 'react-redux';
import { persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';
import LoadingView from 'components/base/LoadingView';
import Layout from 'components/base/Layout';
// i18n wrapper:
import { appWithTranslation …
Run Code Online (Sandbox Code Playgroud)

meta-tags redux server-side-rendering next.js redux-persist

9
推荐指数
0
解决办法
3739
查看次数