我有一个使用ngExpressEngine服务的Angular 5应用程序(遵循Angular Universal启动项目).我的应用程序有一个组件,它发出HTTP请求以显示一些数据.一切正常,但当我使用fetch作为谷歌机器人时,它返回渲染的页面,但没有数据.是否有任何使ngExpressEngine服务器在将页面呈现给用户之前等待HTTP请求?
我正在使用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)我正在运行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) 我最近通过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.js为main.2.js。
由于缓存破裂,文件现在有所不同(main.2.js),但是由于云功能又被缓存了5分钟-访问网站时出现错误(因为main.1.js该功能的缓存版本中已引用该功能不再可用) 。
您将如何解决此问题?我可以有两个活动的部署并一个接一个地激活吗?
caching firebase firebase-hosting server-side-rendering google-cloud-functions
我正在 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)
有谁知道我缺少什么来构建和启动它?
我有一个带有服务器端渲染的工作 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 的示例?
我们公司生产了一个用 svelte/sapper 编写的自动化框架。一项功能是开发人员可以创建自定义 ui 小部件,目前使用纯 js/html/css 和我们的客户端 api。这些小部件存储在数据库中而不是文件系统中。
我认为允许他们将小部件创建为 svelte 组件将是一个很大的优势,因为它在一个位置包含所有标记、js 和 css,并将为他们提供 svelte 反应性的所有好处。
我已经创建了一个使用 svelte 的服务器 API 编译组件的端点,但这似乎只是生成了一个准备好 rollup-plugin-svelte/sapper/babel 来完成生成浏览器可以使用的东西的工作的模块。
如何手动将 svelte 组件编译为 sapper/svelte 生成的最终 javascript 和 css。
我是 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) 通过使用React Developer Tools可以很容易地判断网站是否使用 ReactJS 。
然而,我知道一个使用ReactJS和服务器端渲染的网站(整个页面是用React组件构建的,但页面源包含整个HTML)。是否可以判断该网站是否使用Next.js特别用于 SSR?
Next.js 是否在前端留下任何可检测到的痕迹?
我有一个无服务器 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)