You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Docs/README.MD
+17-17Lines changed: 17 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
SSR.Net
3
3
============
4
4
5
-
SSR.Net enables you to Server-Side Render (SSR) components in React 17, React 18 and Vue 3 in .Net Framework/Core/5/6/7/8/9. It is open for extension and can support other frontend frameworks. It aims at being a performant, minimalistic way to support SSR in .Net.
5
+
SSR.Net enables you to Server-Side Render (SSR) components in React 17, React 18, React 19 and Vue 3 in .Net Framework/Core/5/6/7/8/9. It is open for extension and can support other frontend frameworks. It aims at being a performant, minimalistic way to support SSR in .Net.
6
6
7
7
It is based on many of the ideas in ReactJS.Net: https://github.com/reactjs/React.NET.
8
8
@@ -16,11 +16,11 @@ This library can be installed through NuGet. You will also need to install a Jav
16
16
## Configuration and usage
17
17
18
18
The easiest way to get started is to copy or look at one of the example projects:
19
-
* For .Net Framework: https://github.com/knowit/SSR.Net/tree/main/src/SSR.Net.DotNetFramework
20
-
* For .Net 8: https://github.com/knowit/SSR.Net/tree/main/src/SSR.Net.DotNet8
21
-
* Example frontend for React 18: https://github.com/knowit/SSR.Net/tree/main/src/Frontend/React18Source
22
-
* Example frontend for React 17: https://github.com/knowit/SSR.Net/tree/main/src/Frontend/React17Source
23
-
* Example frontend for Vue 3: https://github.com/knowit/SSR.Net/tree/main/src/Frontend/Vue3Source
19
+
* For .Net Framework: https://github.com/Knowit-Objectnet/SSR.Net/tree/main/src/SSR.Net.DotNetFramework
20
+
* For .Net 8: https://github.com/Knowit-Objectnet/SSR.Net/tree/main/src/SSR.Net.DotNet8
21
+
* Example frontend for React 18: https://github.com/Knowit-Objectnet/SSR.Net/tree/main/src/Frontend/React18Source
22
+
* Example frontend for React 17: https://github.com/Knowit-Objectnet/SSR.Net/tree/main/src/Frontend/React17Source
23
+
* Example frontend for Vue 3: https://github.com/Knowit-Objectnet/SSR.Net/tree/main/src/Frontend/Vue3Source
24
24
25
25
To build frontend, just run the build scripts in package.json.
26
26
@@ -33,9 +33,9 @@ We will look at how to do this for React 18 and .Net 8 in the following chapters
33
33
34
34
### Building a JavaScript bundle fit for SSR
35
35
36
-
We start by creating a bundle with some components. For React 18, there is an example here: https://github.com/knowit/SSR.Net/tree/main/src/Frontend/React18Source
36
+
We start by creating a bundle with some components. For React 18, there is an example here: https://github.com/Knowit-Objectnet/SSR.Net/tree/main/src/Frontend/React18Source
37
37
38
-
We will create a FrontPage component for this example (source code here: https://github.com/knowit/SSR.Net/blob/main/src/Frontend/React18Source/src/Components/FrontPage.tsx).
38
+
We will create a FrontPage component for this example (source code here: https://github.com/Knowit-Objectnet/SSR.Net/blob/main/src/Frontend/React18Source/src/Components/FrontPage.tsx).
39
39
40
40
```
41
41
import React, { useState } from "react";
@@ -80,7 +80,7 @@ export default FrontPage;
80
80
This component has a simple expand/collapse function. This will show us that React is actually working interactively on the client side.
81
81
82
82
We then create an entry point for our bundle. Here, we expose the React, ReactDOMServer and ReactDOMClient libraries as global variables. We also expose the components we've created. It works well to just import them all and add them to a global Components variable. See an example of how this is done here:
In this simple example we use esbuild alone to build the bundle, but it's no problem to use Webpack. You can also use Vite, but you will need to turn off the built in minification and find a different way of minifying it, otherwise the global variables will be removed from the bundle during tree shaking. The esbuild command we use is in the package.json (https://github.com/knowit/SSR.Net/blob/main/src/Frontend/React18Source/package.json):
98
+
In this simple example we use esbuild alone to build the bundle, but it's no problem to use Webpack. You can also use Vite, but you will need to turn off the built in minification and find a different way of minifying it, otherwise the global variables will be removed from the bundle during tree shaking. The esbuild command we use is in the package.json (https://github.com/Knowit-Objectnet/SSR.Net/blob/main/src/Frontend/React18Source/package.json):
99
99
100
100
```
101
101
"scripts": {
@@ -110,14 +110,14 @@ We run this through npm:
110
110
npm run build-dotnet8
111
111
```
112
112
113
-
The resulting js bundle is built to the wwwroot folder in the DotNet8 project as react18example.js: https://github.com/knowit/SSR.Net/tree/main/src/SSR.Net.DotNet8/wwwroot
113
+
The resulting js bundle is built to the wwwroot folder in the DotNet8 project as react18example.js: https://github.com/Knowit-Objectnet/SSR.Net/tree/main/src/SSR.Net.DotNet8/wwwroot
114
114
115
115
### Set up a web project
116
116
117
-
Let's look at this example web project: https://github.com/knowit/SSR.Net/tree/main/src/SSR.Net.DotNet8
117
+
Let's look at this example web project: https://github.com/Knowit-Objectnet/SSR.Net/tree/main/src/SSR.Net.DotNet8
118
118
119
119
We have an extension method for adding a React18Renderer to IoC, which is the normal way of adding things to .Net Core and forward:
@@ -145,7 +145,7 @@ The code above adds both a server-side polyfill named React18TextEncoderPolyfill
145
145
We use the V8 JavaScript engine in this example. This, and the scripts, is configured in a JavaScriptEnginePool. This pool will manage JavaScript engines, create new ones proactively, dispose exhausted engines and forward the rendering calls to the JavaScript engines.
146
146
147
147
To make this work, we have to reference some packages in our web project:
After this is done, we call the extension method during the initialization of our program in Program.cs: https://github.com/knowit/SSR.Net/blob/main/src/SSR.Net.DotNet8/Program.cs
158
+
After this is done, we call the extension method during the initialization of our program in Program.cs: https://github.com/Knowit-Objectnet/SSR.Net/blob/main/src/SSR.Net.DotNet8/Program.cs
To do the actual Server-Side Rendering, we need to serialize props for the React component we want to Server-Side Render and send the props as JSON to the React18Renderer, together with the component name. In this simplified example, we do this directly in the controller (https://github.com/knowit/SSR.Net/blob/main/src/SSR.Net.DotNet8/Controllers/HomeController.cs).
167
+
To do the actual Server-Side Rendering, we need to serialize props for the React component we want to Server-Side Render and send the props as JSON to the React18Renderer, together with the component name. In this simplified example, we do this directly in the controller (https://github.com/Knowit-Objectnet/SSR.Net/blob/main/src/SSR.Net.DotNet8/Controllers/HomeController.cs).
168
168
169
169
First, we inject the React18Renderer in the controller (some lines are removed for brevity and clarity):
170
170
@@ -203,7 +203,7 @@ public ActionResult React18() {
203
203
}
204
204
```
205
205
206
-
The view is kept very simple (https://github.com/knowit/SSR.Net/blob/main/src/SSR.Net.DotNet8/Views/Home/React18.cshtml):
206
+
The view is kept very simple (https://github.com/Knowit-Objectnet/SSR.Net/blob/main/src/SSR.Net.DotNet8/Views/Home/React18.cshtml):
0 commit comments