Javascript 在服务器上呈现页面时如何包含样式？_Javascript_Css_Node.js_Webpack_Server Side Rendering

Javascript 在服务器上呈现页面时如何包含样式？

javascript css node.js webpack

Javascript 在服务器上呈现页面时如何包含样式？,javascript,css,node.js,webpack,server-side-rendering,Javascript,Css,Node.js,Webpack,Server Side Rendering,我在实现服务器端渲染时遇到问题。我正在使用在node.js中编写的react+typescript前端和后端以及typescript。当我的页面第一次从服务器发送时（在js加载之前），我找不到在页面中包含样式的方法。我尝试将所有样式绑定到一个main.css文件中，然后在从服务器发送的html文件中使用link标记，但在这种情况下，加载css和加载js所需的时间一样长（这里SSR的目的是什么？）。此外，我还试图避免内联设置组件的样式。任何帮助都将被告知。在这里，我将分享我当前的一些代码，以防在某

我在实现服务器端渲染时遇到问题。我正在使用在node.js中编写的react+typescript前端和后端以及typescript。当我的页面第一次从服务器发送时（在js加载之前），我找不到在页面中包含样式的方法。我尝试将所有样式绑定到一个main.css文件中，然后在从服务器发送的html文件中使用link标记，但在这种情况下，加载css和加载js所需的时间一样长（这里SSR的目的是什么？）。此外，我还试图避免内联设置组件的样式。任何帮助都将被告知。在这里，我将分享我当前的一些代码，以防在某些方面有所帮助

App Component <- optimally i would like to see styled app as soon as browser reads .html file (i guess that's 
the purpose of SSR)


export default class App extends React.Component<State, Props> {
state: State = {

}

render = () => {
    return (
        <div className="app">
            APP COMPONENT !!!
        </div>
    )
  }
}

index.tsx（express主文件）的一部分

server.get（'/*'，（req，res）=>{
const body=renderToString(
);
res.send(
html({
身体
})
);
})

和转换为html的函数

const html = ({ body }: { body: string }) => `
  <!DOCTYPE html>
  <title> my app</title>
  <html>
    <head>
      <link rel="stylesheet" href="/css/main.css">
    </head>
    <body style="margin:0">
      <div id="app">${body}</div>
    </body>
    <script src="/bundle.js" defer></script>
  </html>
`;

export default html;

consthtml=（{body}:{body:string}）=>`
我的应用程序
${body}
`;
导出默认html；

我假设您使用的是express，它有一个内置的方法来服务静态文件（如图像、css等），您只需按如下方式显示路径

server.use('static', express.static('css'))

它基本上服务于链接下css文件夹中的所有文件

http://${host}/static/

如果您想提供静态图像，可以执行以下操作

server.use('images', express.static('images'))

<img src="/images/<image_name>" />

然后，您可以使用以下代码引用代码中的任何图像文件

server.use('images', express.static('images'))

<img src="/images/<image_name>" />

“/>

你可以在这里了解更多。

我假设您使用的是express，它有一个内置的方法来服务静态文件（如图像、css等），您只需按如下方式显示路径

server.use('static', express.static('css'))

它基本上服务于链接下css文件夹中的所有文件

http://${host}/static/

如果您想提供静态图像，可以执行以下操作

server.use('images', express.static('images'))

<img src="/images/<image_name>" />

然后，您可以使用以下代码引用代码中的任何图像文件

server.use('images', express.static('images'))

<img src="/images/<image_name>" />

“/>

你可以在这里了解更多。

这完全不是我面临的问题。我知道如何为静态文件服务。如果您知道SSR的概念，我将在加载js脚本之前显示预填充页面。我想做的是在这个页面上添加样式，这样看起来就不会像垃圾。这完全不是我面临的问题。我知道如何为静态文件服务。如果您知道SSR的概念，我将在加载js脚本之前显示预填充页面。我想做的是在这个页面上添加样式，这样看起来就不会像垃圾了。