Skip to content

Commit c7b7c20

Browse files
committed
fix typos
1 parent b31e774 commit c7b7c20

File tree

1 file changed

+11
-11
lines changed

1 file changed

+11
-11
lines changed

docs/server-side-rendering.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff 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!
22

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)
44

55
## Step 1: Reorganize your source files
66

@@ -17,13 +17,13 @@ pages
1717

1818
View.fs and Types.fs will be shared between client and server.
1919

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
2121

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

2424
Here are some hints about doing this:
2525

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`
2727

2828
```diff
2929
- div [ !!("class", "container") ] []
@@ -40,7 +40,7 @@ Here are some hints about doing this:
4040

4141
### 2. Make sure your browser/js code won't be executed on the server side
4242

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

4545
Thanks for Fable Compiler's `FABLE_COMPILER` directive, we can easly distinguish client environment and server environment and execute different code in each environment:
4646

@@ -89,9 +89,9 @@ open Fable.Import.Browser
8989
```
9090

9191

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

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

9696
```diff
9797
open Fable.Core
@@ -165,8 +165,8 @@ let renderHtml () =
165165

166166
## Step 4. Update your elmish app's init function
167167

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

171171
e.g.
172172

@@ -199,7 +199,7 @@ Program.mkProgram init update view
199199
|> Program.run
200200
```
201201

202-
Now enjoi! If you find bugs or just need some help, please create an issue and let we know.
202+
Now enjoy! If you find bugs or just need some help, please create an issue and let us know.
203203

204204
## Try the sample app
205205

0 commit comments

Comments
 (0)