我有这个组件：
export class Demo extends React.Component<DemoProps, any> {
private foo: number;
constructor(props: DemoProps) {
super(props);
}
render() {
return (
<html>
<head>
<script>
// I would like to add an inline script here
</script>
</head>
<body>
<div id="root">
(hello world)
</div>
<div>
<progress id="hot-reload-progress-bar" value="100" max="100"></progress>
</div>
</body>
</html>
)
}
}
如何在<script></script>标签内添加内联脚本？
如果尝试这个：
getScript() {
const config = JSON.stringify({
env: process.env.NODE_ENV
});
return 'define(\"@config\", [], function () {' +
' return ' + config +';' +
'});' …我目前正在我的应用程序中实现 Angular Universal。我已经有一堆错误需要解决，但我坚持这个错误。我可以构建我的应用程序，aot 编译工作正常，但是当我运行应该引导我的应用程序的服务器时，我可以看到该错误：
我的 \node_modules\ng2-translate\src\translate.pipe.js:1 中出现意外的令牌导入
我已经看到服务器版本有一个特殊的加载器使用 fs 而不是 http 来查找与语言对应的 json 文件。
所以这是我的代码：
应用程序.浏览器.模块.ts
`import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TranslateModule, TranslateStaticLoader, TranslateLoader } from 'ng2-translate';
import { Http } from '@angular/http';
import { BrowserStateTransferModule } from '@ngx-universal/state-transfer';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { HttpTranslate } from './translate.config';
@NgModule({
imports: [
BrowserModule.withServerTransition({
appId: 'aml-website'
}),
BrowserStateTransferModule.forRoot(),
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: HttpTranslate,
deps: …server-side-rendering ng2-translate angular-universal angular
是否可以使用 Angular 进行服务器端渲染并隐藏用户的 HTTP 请求，即在服务器端执行 http 请求？
我创建了一个 api，但我不想将其暴露给外界，我不希望您可以在网络选项卡中看到响应数据。
那么 Angular 是否可以做到这一点，或者我是否需要使用不同的框架来实现这一点？
我使用 vue init nuxt /express myprojectstart 启动了 nuxt 应用程序。
这是我的目录。
page
|- _project.vue
|- project
| - index.vue
_project.vue的配置
export default {
head () {
return {
title: this.project.title,
meta: [
{property: 'fb:app_id', content: '12873892173892'},
{property: 'og:title', content: this.project.title},
{property: 'og:image', content: this.project.image},
],
}
}
},
async asyncData ({app, params, error}) {
const project = await app. $ axios. $ get (`/ project`)
return {
project: project.project,
}
}
}
但是，如果您按 Facebook 共享按钮，则不会出现所需的标题和图像。
我认为这是服务器端渲染问题。但我无法解决这个问题。
我将不胜感激你的帮助。
facebook facebook-opengraph vue.js server-side-rendering nuxt.js
Next.js项目中有几个页面存在SSR相关的问题，导致报错npm run build，导致项目无法构建：
pages/
foo/
bar/
[id].jsx
index.jsx
index.jsx
...
例如bar：
export function getStaticProps() {
return someApiCallThatCurrentlyFails()
...
}
export default function Bar() {...}
作为快速修复，不构建bar/*.*页面并使路由不可用可能会很方便。
可以在 Next.js 构建中忽略页面而不实际更改或删除项目中的页面组件文件吗？
我刚刚将我的 Angular 6 项目升级到了 Angular 11。这个项目已经实现了 SSR，这是问题所在。
当我运行时，ng run myapp:server我收到此错误：
? Server application bundle generation complete.
Initial Chunk Files | Names | Size
main.js | main | 4.06 kB
| Initial Total | 4.06 kB
Build at: 2021-04-22T14:02:16.388Z - Hash: 2a6aaefe9d15b8a7dedc - Time: 4907ms
Error: Angular structure loaded both synchronously and asynchronously
在我的angular.json我有这个代码：
? Server application bundle generation complete.
Initial Chunk Files | Names | Size
main.js | main | 4.06 kB
| Initial Total | …我有一个项目，仅出于一个原因使用react-router v3。原因是需要使用数据预取的服务器端渲染，最方便的方法是将集中式路由配置保持在objector 中array并循环匹配元素以从服务器端的 API 获取数据。稍后的数据将与响应 HTML 一起传递给客户端，并存储在 JSON 格式字符串的变量中。
应用程序也使用代码拆分，但是通过babel-plugin-transform-ensure-ignore在服务器端使用，我可以直接获取组件而不是延迟加载，并且本机import方法将仅在客户端使用。
尽管如此，上述结构不适用于react-router v5，因为它有点困难，因为我不能使用@loadable/components，正如react-router官方文档所建议的那样。根据我的观察，@loadable/components只是在服务器端生成 HTML，而不是给我实现fetch负责服务器端逻辑的方法的组件。
所以想请教一下webpack + react-router v5 + ssr + data prefetch + redux + code splitting的好结构
我看到它非常复杂并且没有通用的解决方案，但是我可能是错的。
任何方向或建议表示赞赏。
javascript lazy-loading reactjs webpack server-side-rendering
我从 materialui ( https://material-ui.com/guides/server-rendering/ )的文档中找到了解决方案，但我仍然不知道原因。
为什么样式在第一次渲染时有效，但在第二次渲染时消失？我知道 SSR 会在每个请求中为客户端生成带有 css 的 html 模板，因此样式应该仍然有效，因为它被注入到 html 模板中。
在文档中，它提到“在客户端，将在删除服务器端注入的 CSS 之前第二次注入 CSS”。但是，我不知道为什么需要删除它。CSS 被注入到每个请求的 html 模板中，所以它不会导致我的想法出现任何崩溃，以及为什么删除注入的 css 后样式不会消失。
我正在尝试制作一个 SSR 反应应用程序，但无法将道具从 express 传递到组件。我在做什么错误？
服务器.js
import AppPage2 from './src/project02/LandingPage';
......
......
server.get('/project2',async (req,res)=>{
const context = {data:'test'}
const sheet = new ServerStyleSheet();
const content = ReactDOMServer.renderToString(sheet.collectStyles(
<StaticRouter location={req.url} context={context}>
<AppPage2 state={{"foo":"baar"}}/>
</StaticRouter>)
);
const styles = sheet.getStyleTags();
let html = appShell( 'Project 2', content,' project2.bundle.js',styles)
res.status(200).send(html);
res.end()
})
AppPage2(./src/project02/LandingPage)
import React from 'react';
import {Wrapper,Title} from './styleComponent/testStylePage'
.......
.......
class AppPage extends React.Component {
componentDidMount() {
console.log("{{API}}",this,this.props, this.props.staticContext)
}
render(){
return(
<Wrapper>
<Title>This is project 01 </Title>
</Wrapper>
) …javascript reactjs react-router isomorphic-javascript server-side-rendering
Next.js 只允许在 _App.js 中导入全局 CSS。但是我们不能在每个组件中导入全局 CSS，因为我们必须按照 Next.js 的限制使用 CSS 模块。
现在我正在将一个大型项目迁移到 Next.js，并且将每个模块的 css 转换为 CSS 模块非常困难。有什么办法可以解除这个限制吗？
限制文档链接： https : //nextjs.org/docs/messages/css-global
reactjs ×5
javascript ×4
angular ×3
next.js ×3
css ×2
node.js ×2
facebook ×1
lazy-loading ×1
material-ui ×1
nuxt.js ×1
react-router ×1
server-side ×1
universal ×1
vue.js ×1
webpack ×1