Skip to content

Commit 2024306

Browse files
committed
Update packages, make example for React19 work, update example from .net 6 to .net 8, target more frameworks
1 parent a65c60e commit 2024306

54 files changed

Lines changed: 69746 additions & 96570 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@
33
**/node_modules/*
44
**/bin/*
55
**/obj/*
6-
*.user.csproj
6+
*.csproj.user
7+

Docs/README.MD

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
SSR.Net
33
============
44

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.
66

77
It is based on many of the ideas in ReactJS.Net: https://github.com/reactjs/React.NET.
88

@@ -17,7 +17,7 @@ This library can be installed through NuGet. You will also need to install a Jav
1717

1818
The easiest way to get started is to copy or look at one of the example projects:
1919
* 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
2121
* Example frontend for React 18: https://github.com/knowit/SSR.Net/tree/main/src/Frontend/React18Source
2222
* Example frontend for React 17: https://github.com/knowit/SSR.Net/tree/main/src/Frontend/React17Source
2323
* 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:
2929
* [Set up a web project](#set-up-a-web-project)
3030
* [Set up a controller and a view](#Set-up-a-controller-and-a-view)
3131

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 18 and 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.
3333

3434
### Building a JavaScript bundle fit for SSR
3535

@@ -100,30 +100,30 @@ In this simple example we use esbuild alone to build the bundle, but it's no pro
100100
```
101101
"scripts": {
102102
...
103-
"build-dotnet6": "esbuild ./src/app.tsx --bundle --outfile=../../SSR.Net.DotNet6/wwwroot/react18example.js"
103+
"build-dotnet8": "esbuild ./src/app.tsx --bundle --outfile=../../SSR.Net.DotNet8/wwwroot/react18example.js"
104104
},
105105
```
106106

107107
We run this through npm:
108108

109109
```
110-
npm run build-dotnet6
110+
npm run build-dotnet8
111111
```
112112

113-
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
114114

115115
### Set up a web project
116116

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
118118

119119
We have an extension method for adding a React18Renderer to IoC, which is the normal way of adding things to .Net Core and forward:
120-
https://github.com/knowit/SSR.Net/blob/main/src/SSR.Net.DotNet6/Services/ServiceCollectionExtensionsReact18SSR.cs
120+
https://github.com/knowit/SSR.Net/blob/main/src/SSR.Net.DotNet8/Services/ServiceCollectionExtensionsReact18SSR.cs
121121

122122
```
123123
using JavaScriptEngineSwitcher.V8;
124124
using SSR.Net.Services;
125125
126-
namespace SSR.Net.DotNet6.Services
126+
namespace SSR.Net.DotNet8.Services
127127
{
128128
public static class ServiceCollectionExtensionsReact18SSR
129129
{
@@ -145,7 +145,7 @@ The code above adds both a server-side polyfill named React18TextEncoderPolyfill
145145
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.
146146

147147
To make this work, we have to reference some packages in our web project:
148-
https://github.com/knowit/SSR.Net/blob/main/src/SSR.Net.DotNet6/SSR.Net.DotNet6.csproj
148+
https://github.com/knowit/SSR.Net/blob/main/src/SSR.Net.DotNet8/SSR.Net.DotNet8.csproj
149149

150150
```
151151
<PackageReference Include="JavaScriptEngineSwitcher.Core" Version="3.19.0" />
@@ -155,7 +155,7 @@ https://github.com/knowit/SSR.Net/blob/main/src/SSR.Net.DotNet6/SSR.Net.DotNet6.
155155
<PackageReference Include="Microsoft.ClearScript.V8.Native.win-x86" Version="7.3.7" />
156156
```
157157

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.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
159159

160160
```
161161
builder.Services.AddReact18Renderer(builder.Environment);
@@ -164,7 +164,7 @@ builder.Services.AddReact18Renderer(builder.Environment);
164164

165165
### Set up a controller and a view
166166

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.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).
168168

169169
First, we inject the React18Renderer in the controller (some lines are removed for brevity and clarity):
170170

@@ -203,7 +203,7 @@ public ActionResult React18() {
203203
}
204204
```
205205

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):
207207

208208
```
209209
@using SSR.Net.Models;

0 commit comments

Comments
 (0)