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
+13-13Lines changed: 13 additions & 13 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. 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 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
@@ -17,7 +17,7 @@ This library can be installed through NuGet. You will also need to install a Jav
17
17
18
18
The easiest way to get started is to copy or look at one of the example projects:
19
19
* For .Net Framework: https://github.com/knowit/SSR.Net/tree/main/src/SSR.Net.DotNetFramework
20
-
* For .Net 6: https://github.com/knowit/SSR.Net/tree/main/src/SSR.Net.DotNet6
20
+
* For .Net 8: https://github.com/knowit/SSR.Net/tree/main/src/SSR.Net.DotNet8
21
21
* Example frontend for React 18: https://github.com/knowit/SSR.Net/tree/main/src/Frontend/React18Source
22
22
* Example frontend for React 17: https://github.com/knowit/SSR.Net/tree/main/src/Frontend/React17Source
23
23
* Example frontend for Vue 3: https://github.com/knowit/SSR.Net/tree/main/src/Frontend/Vue3Source
@@ -29,7 +29,7 @@ To configure and use SSR.Net, you need to do several things:
29
29
*[Set up a web project](#set-up-a-web-project)
30
30
*[Set up a controller and a view](#Set-up-a-controller-and-a-view)
31
31
32
-
We will look at how to do this for React 18 and .Net 6 in the following chapters. There are examples for React 17, React 18and Vue 3 for both .Net Framework and .Net 6 in the code base. The examples in .Net 6 should be quite descriptive for .Net Core 2 and forward.
32
+
We will look at how to do this for React 18 and .Net 8 in the following chapters. There are examples for React 17, React 18, React 19 and Vue 3 for both .Net Framework and .Net 8 in the code base. The examples in .Net 8 should be quite descriptive for .Net Core 2 and forward.
33
33
34
34
### Building a JavaScript bundle fit for SSR
35
35
@@ -100,30 +100,30 @@ In this simple example we use esbuild alone to build the bundle, but it's no pro
The resulting js bundle is built to the wwwroot folder in the DotNet6 project as react18example.js: https://github.com/knowit/SSR.Net/tree/main/src/SSR.Net.DotNet6/wwwroot
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
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.DotNet6
117
+
Let's look at this example web project: https://github.com/knowit/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:
public static class ServiceCollectionExtensionsReact18SSR
129
129
{
@@ -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.DotNet6/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/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.DotNet6/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/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.DotNet6/Views/Home/React18.cshtml):
206
+
The view is kept very simple (https://github.com/knowit/SSR.Net/blob/main/src/SSR.Net.DotNet8/Views/Home/React18.cshtml):
0 commit comments