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/server-side-rendering.md
+11-11Lines changed: 11 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
-
# Five Step to Enable Server-Side Rendering in your Elmish + Dotnet App!
1
+
# Five Steps to enable Server-Side Rendering in your Elmish + DotNet App!
2
2
3
-
[SSR Sample App of safe-stack template is awailable!](https://github.com/fable-compiler/fable-react/tree/master/Samples/SSRSample)
3
+
[SSR Sample App of SAFE-stack template is available!](https://github.com/fable-compiler/fable-react/tree/master/Samples/SSRSample)
4
4
5
5
## Step 1: Reorganize your source files
6
6
@@ -17,13 +17,13 @@ pages
17
17
18
18
View.fs and Types.fs will be shared between client and server.
19
19
20
-
## Step 2. Make shared files can be executed on the server side
20
+
## Step 2. Make sure shared files can be executed on the server side
21
21
22
-
Some code works in Fable might throw a run time exception when executed on dotnet, so we should be careful with unsafe type casting and add compiler directives to remove some code if necessary.
22
+
Some code that works in Fable might throw a run time exception when executed on dotnet, so we should be careful with unsafe type casting and add compiler directives to remove some code if necessary.
23
23
24
24
Here are some hints about doing this:
25
25
26
-
### 1. Replace unsafe cast (unbox and `!!`) in your html attributes and css props with `HTMLAttr.Custom`, `SVGAttr.Custom` and `CSSProp.Custom`
26
+
### 1. Replace unsafe cast (unbox and `!!`) in your HTML attributes and CSS props with `HTMLAttr.Custom`, `SVGAttr.Custom` and `CSSProp.Custom`
27
27
28
28
```diff
29
29
- div [ !!("class", "container") ] []
@@ -40,7 +40,7 @@ Here are some hints about doing this:
40
40
41
41
### 2. Make sure your browser/js code won't be executed on the server side
42
42
43
-
One big challenge of sharing code between client and sever is that server side has different API environment with client side. In this respect Fable + dotnet's SSR is has not much difference with nodejs, except in dotnet you should not only prevent browser's API call, but also js.
43
+
One big challenge of sharing code between client and server is that server side has different API environment than client side. In this respect Fable + dotnet's SSR is not much different than nodejs, except in dotnet you should not only prevent browser's API call, but also js.
44
44
45
45
Thanks for Fable Compiler's `FABLE_COMPILER` directive, we can easly distinguish client environment and server environment and execute different code in each environment:
46
46
@@ -89,9 +89,9 @@ open Fable.Import.Browser
89
89
```
90
90
91
91
92
-
### 3. Add placeholder for components cannot been rendered on the serve side, like js native components.
92
+
### 3. Add a placeholder for components that cannot been rendered on the server side, like js native components.
93
93
94
-
In `Fable.Helpers.Isomorphic` we also implemented a help funciton to render a placeholder element for components that cannot been rendered on the server side, this function will also help [React.hydrate](https://reactjs.org/docs/react-dom.html#hydrate) to understand the differences between htmls rendered by client and server, so React won't treat it as a mistake and warn about it.
94
+
In `Fable.Helpers.Isomorphic` we also implemented a help function to render a placeholder element for components that cannot been rendered on the server side, this function will also help [React.hydrate](https://reactjs.org/docs/react-dom.html#hydrate) to understand the differences between htmls rendered by client and server, so React won't treat it as a mistake and warn about it.
95
95
96
96
```diff
97
97
open Fable.Core
@@ -165,8 +165,8 @@ let renderHtml () =
165
165
166
166
## Step 4. Update your elmish app's init function
167
167
168
-
1. Init your elmish app by state printed in the html.
169
-
2. Remove init commands that still fetch data which already printed in the html.
168
+
1. Init your elmish app by state printed in the HTML.
169
+
2. Remove init commands that still fetch data which already printed in the HTML.
0 commit comments