标签: server-side-rendering
Nuxt 自定义模块挂钩未调用
我想从中间件运行后出现的 ssr 服务器传递一些额外的数据，并在客户端中间件上使用它。有点类似于 nuxt 已经对 vuex 所做的事情。
挂钩处的文档render:context：
每次路由被服务器渲染并且在 render:route hook 之前。在将 Nuxt 上下文序列化到 window.__NUXT__ 之前调用，可用于添加一些可以在客户端获取的数据。
现在我的自定义插件定义了一些钩子，如文档中所述，但并非所有钩子都被正确调用：
module.exports = function() {
this.nuxt.hook('render:route', (url, result, context) => {
console.log('This one is called on every server side rendering')
}
this.nuxt.hook('renderer', renderer => {
console.log('This is never called')
}
this.nuxt.hook('render:context', context => {
console.log('This is only called once, when it starts loading the module')
}
}
我做错了什么以及如何将自定义 ssr 数据传递到客户端渲染器？
推荐指数
解决办法
查看次数
React Material-ui SSR - 警告：Prop `d` 不匹配。服务器：“M 0 0 h 24 v 24 H 0 Z”客户端：“M0 0h24v24H0z”
我正在一个带有服务器端渲染和 Material-ui 的 React 站点上工作。一切都很好，包括 mui JSS 的东西。
然后我从@material-ui/icons 添加了一个 SVG 图标
现在，Edge 和 IE11 正在抱怨：警告：道具d不匹配。服务器：“M 0 0 h 24 v 24 H 0 Z”客户端：“M0 0h24v24H0z”
警告表明服务器和客户端渲染不匹配，但如果我使用 curl 获得服务器渲染它是正确的，并且不包括 IE/Edge 控制台中显示的空格。
所有其他浏览器（当然）都可以。
有没有其他人只在 MS 浏览器中遇到过 SSR 问题？
这是我能得到的一个例子。它基于 material-ui-master/examples/ssr 并删除了大部分内容：
服务器.js：
import express from "express";
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';
function renderFullPage(html) {
return `
<!doctype html>
<html>
<body>
<div id="root">${html}</div>
<script src="build/bundle.js"></script>
</body>
</html>
`;
}
function handleRender(req, res) { …internet-explorer-11 reactjs microsoft-edge material-ui server-side-rendering
推荐指数
解决办法
查看次数
Angular 8 universal server side rendering
I am following this tutorial https://blog.angular-university.io/angular-universal/ but I couldn't execute the first command
ng generate universal --client-project -the name of your client project-
the error is
Target name already exists.
any suggestions or if anyone has a better solution to implement angular universal on an existing angular project?
推荐指数
解决办法
查看次数
@auth0/auth0-spa-js isAuthenticated 在页面刷新时未定义
我正在对我的应用程序进行身份验证，并且已设法将登录名添加到我的页面。用户可以登录并存储他们的会话，但是一旦我刷新页面，他们的会话就消失了。ReactJs + NextJS
我知道有getTokenSilently但是当我调用它时它会返回它！
error: "login_required"
error_description: "Login required"
state: "N3B+aWt4T1dBeGlibWsua2ZkdX5LTzR6T19ndTdXfkJ2Tm5kUzJIY3lXTQ=="
我在这里做错了什么？
- 我的个人资料页面！
useEffect(() => {
if (typeof window !== `undefined`) {
if (!loading && !isAuthenticated) {
loginWithRedirect({})
}
}
});
- 如果用户登录，主页将显示一个图标！
<Button
className="account-button"
variant="textButton"
icon={<i className="flaticon-user" />}
aria-label="login"
title={loading ? 'loading' : isAuthenticated ? 'Hi' : 'login'}
/>
- 认证服务
// src/react-auth0-spa.js
import React, { useState, useEffect, useContext } from "react";
import createAuth0Client from "@auth0/auth0-spa-js";
const DEFAULT_REDIRECT_CALLBACK = () =>
window.history.replaceState({}, document.title, window.location.pathname);
export const Auth0Context = React.createContext(); …推荐指数
解决办法
查看次数
Angular 通用服务器错误：使用默认回退时，必须在配置中提供回退语言
我已经在我的应用程序上安装了 angular Universal。运行npm run build:ssr- 完成。作品。运行npm run server:ssr- DONE.WORKS。
访问服务器 URL (localhost:4000) 后，页面未完全加载并在终端上引发以下错误：
node.js express server-side-rendering angular-universal angular
推荐指数
解决办法
查看次数
无法导入带有样式组件和 Next.js 的 Google 字体
尝试加载 Google 字体时遇到以下问题。我读到我应该写这样的东西_document.js来将它导入到 head 标签中
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
<link
rel="preload"
href="/fonts/noto-sans-v9-latin-regular.woff2"
as="font"
crossOrigin=""
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
但这是我必须使用的代码才能使 Styled Components 与 Next.js 一起使用
import Document, { DocumentContext } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static …推荐指数
解决办法
查看次数
isomorphic-style-loader 无法正常工作
嘿，我正在做这个简单的react+SSR项目，它包含isomorphic-style loader. 我按照这里https://www.npmjs.com/package/isomorphic-style-loader 的详细说明来实现它的分步指南，但它不起作用。我做的样式没有显示。谁能指导我解决这个问题？
这是我的 webpack config
var path = require('path');
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
var browserConfig = {
entry: './src/browser/index.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/',
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader' },
{
test: /\.css$/,
use: [
'isomorphic-style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
'postcss-loader',
],
},
],
},
mode: 'production',
plugins: [
new webpack.DefinePlugin({
__isBrowser__: …推荐指数
解决办法
查看次数
刷新页面时 nextJS SSR useRouter() 不起作用
我在我的项目中使用 nextJS SSR。现在，当我尝试使用以下代码获取页面参数时，它显示未定义。
function About() {
const router = useRouter();
const { plan_id } = router.query;
console.log(plan_id)
}
export default About;
当页面从其他页面路由时（没有使用“下一个/链接”重新加载页面）时它可以工作，但是当我刷新页面时它不起作用。有人可以帮忙吗？
推荐指数
解决办法
查看次数
使用 React Router 进行服务器端渲染“浏览器历史需要一个 DOM”
我已经通过互联网扫描了两天，但我无法了解使用 react-routes 实现 SSR 的要点。在没有路线的情况下，我花了 5 天的时间才以某种方式理解这一切。但是现在我无法进一步理解使用react-routes。这是必要的细节-
服务器/server.js
import express from 'express';
import fs from 'fs';
import path from 'path';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import {StaticRouter} from 'react-router-dom';
import App from '../src/App';
const PORT = process.env.PORT || 8080;
const app = express();
app.use(express.static(path.resolve('./build')))
app.get('*', (req, res) => {
fs.readFile(path.resolve('./build/index.html'), 'utf-8', (err, data) => {
if (err) {
console.log(err);
return res.status(500).send('Some error happened');
}
const context = {};
const app = ReactDOMServer.renderToString(
<StaticRouter …node.js reactjs react-router server-side-rendering create-react-app
推荐指数
解决办法
查看次数
如何将变量从 Express.js 传递到 Angular11 通用 SSR
快速提问，我们如何从 expressjs 传递到 angular-universal HTML 组件或主应用程序 index.html 变量，例如从 expressjs 到 ejs 或 pug 可用？
app.get('*', (req, res) => {
res.render('index', { req, messsage: 'This is your message' });
}
Ejs 可以像这样从 expressjs 获取变量：
<h1><%= message %></h1>
Pug 可以像这样从 expressjs 获取变量：
h1= message
当页面加载或重新加载到视图源时，我们需要显示来自 expressjs 的消息，而不是在 shadow dom 或 DOM 中，或者在 chrome 上作为“检查”。必须位于渲染 HTML 源文件中的视图源上。
我们使用带有 expressjs 的 angular 11 SSR 通用。
有什么想法还是不可能？
推荐指数
解决办法
查看次数
标签 统计
reactjs ×5
angular ×3
next.js ×3
express ×2
node.js ×2
auth0 ×1
css ×1
material-ui ×1
next-router ×1
nuxt.js ×1
react-router ×1
vuejs2 ×1