Add Server Side Rendering Support #65

zaaack · 2018-02-27T14:43:53Z

Pure F#, No Nodejs Required!

Recently I'm working on a web app which needs SEO, while search engines in my country don't support SPA well, so server-side-rendering becomes my first choice. At first, I was looking at something like aspnet/JavaScriptServices, but it's a little complicated, and running nodejs instances in an asp.net server would require more overhead. it's just too complicated for my case.

This approach is inspired by Giraffe's view engine, it runs fable-react in the server side by simply replace each HTML tag to an HTMLNode tree, so it can be rendered to HTML.

Props

Simplier, don't need to install nodejs or maintain nodejs instances on the server-side.
Easier, everything is F#, easy integration with Elmish.
Faster, about 2x ~ 3x faster then node + react-dom/server (with NODE_ENV=production) in my macbook
Support React 16's new server-side rendering API (.hydrate)

Cons

Elements created from js native won't render.

Elements support server-side rendering:

Pure functions (e.g. Elmish Components).
Class Components written in F# (ofType)
Function Componets written in F# (ofFunction)
React Components from FFI (ofImport)
...

alfonsogarciacaro

Nice one! So is this to add a React API that can be used from .NET servers? Will the generated tags be recognized by React on the frontend side? (I think they need some special attributes for that.)

alfonsogarciacaro · 2018-02-27T15:21:59Z

src/Fable.React/Fable.Helpers.ReactServer.fs

+      match child with
+      | Some c -> c
+      | None -> (renderList (children |> Seq.cast))
+    sprintf "<%s %s>%s</%s>" tag attrs child tag


sprintf is a bit slow, I'd use + for string concatenation here

alfonsogarciacaro · 2018-02-27T15:25:15Z

Samples/SSRSample/src/Server/Server.fs

+            [ rawText (sprintf """
+            var __INIT_STATE__ = %s
+            """ (toJson initState)) ]
+          script [ _src "http://localhost:8080/public/bundle.js" ] []


Even if this is a sample, I'd try to avoid the URL literal here. If you can't use public/bundle.js because Wepback dev server and Giraffe are running in different ports, I'd use a variable so to minimize the chances http://localhost:8080 reaches production.

alfonsogarciacaro · 2018-02-27T15:26:12Z

src/Fable.React/Fable.Helpers.React.fs

@@ -22,9 +22,13 @@ module Props =
        | Key of string
        | Ref of (Browser.Element->unit)
        interface IHTMLProp
+    [<Pojo>]
+    type DangeousHtml = {


Minor typo: DangerousHtml

zaaack · 2018-02-28T11:44:08Z

@alfonsogarciacaro Sorry for my late, I was planning to reply in this morning but got a busy day, then I forgot...:sweat_smile:

I haven't tried this with React 16's new server-side rendering API .hydrate yet, but I suppose it will be OK because the HTML generated in server looks really like those from react-dom/server. I'll add it to samples to it works or not.

alfonsogarciacaro · 2018-02-28T12:54:06Z

src/Fable.React/Fable.Helpers.React.fs

@@ -755,22 +804,21 @@ let inline ofFunction<[<Pojo>]'P> (f: 'P -> ReactElement) (props: 'P) (children:
 /// Example: `ofImport "Map" "leaflet" { x = 10; y = 50 } []`
 let inline ofImport<[<Pojo>]'P> (importMember: string) (importPath: string) (props: 'P) (children: ReactElement list): ReactElement =


I was thinking to surround ofImport, ofType, ofFunction with #if FABLE_COMPILER to remove them when compiling on server-side. But this would cause conflicts with IDEs on frontend side, because they don't define FABLE_COMPILER. Not sure, what's the best solution. I guess ofImport throws an exception quickly (and users won't probably import a JS file in .NET either) but I don't know what happens with ofType and ofFunction. Do they throw exception or fail silently?

The other option would be to extract common parts into a Fable.React.Core package and distribute two packages: Fable.React for JS side and Fable.ReactServer or Fable.React.Net 🤔

We may need a design guideline for shared libraries between JS and .NET. @MangelMaxime is already working on this: haf/Http.fs#142

I guess ofImport throws an exception quickly (and users won't probably import a JS file in .NET either) but I don't know what happens with ofType and ofFunction. Do they throw exception or fail silently?

I was thinking this problem, too. In my imagination, we can create a help function by wrapping runtime exceptions in a function that only executed in the client side, but not tested yet.

let hybridView (clientView: 'model -> ReactElement) (serverView: 'model -> ReactElement) (model: 'model) = #if FABLE_COMPILER clientView model #else serverView model #endif

And import a js module could write like this:

#if FABLE_COMPILER let JsComp: React.ComponentClass<JsCompProps> = importDefault "./jsComp" #else let JsComp = Unchecked.defaultof<React.ComponentClass<JsCompProps>> #endif

zaaack · 2018-03-01T10:35:02Z

@alfonsogarciacaro ofType and ofFunction are working now! By using dotnet's reflection API we can render React Components written in F# just as react-dom/server do!

But I got some trouble when implementing an isomorphic version of import, any thoughts or advice about this?

repl

[<Emit(""" require($1)[$0] """)>]
let importOrDefault<'T> (selector: string) (path: string) =
    Unchecked.defaultof<'T>

alfonsogarciacaro · 2018-03-01T12:15:58Z

I wouldn't use the Emit attribute with import expressions for several reasons:

JS tree shaking works much better when using import instead of `require.
Fable also does a few tricks with imports (e.g. see How to import react elements as members of other elements #60 (comment))

If you've made ofType and ofFunction work that's awesome! I wouldn't worry too much about ofImport: if users try to compile it on the server side, a "JS only" exception will be thrown right away so hopefully users will spot the problem quickly.

I'm OK with merging this 👍 Is it good to go or do you want to work a bit more on it?

zaaack · 2018-03-01T12:31:57Z

@alfonsogarciacaro I think I'm done here if I don't need to implement isomorphic import. Please tell me if there is something wrong or missing.

alfonsogarciacaro · 2018-03-01T13:55:19Z

Awesome, thanks a lot for this amazing feature @zaaack! I'll merge, try locally and let you know if I have any question 😄

forki · 2018-03-01T13:58:19Z

Next step: tutorial how to do it. Please please please Am 01.03.2018 14:55 schrieb "Alfonso Garcia-Caro" <notifications@github.com

:

Merged #65 <#65>. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#65 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADgNOilfZzCaG1A8GnIwUINBMxyyyfKks5tZ_3QgaJpZM4SVDE5> .

forki · 2018-03-02T14:34:13Z

@zaaack any chance you cou try to add SSR to https://github.com/SAFE-Stack/SAFE-BookStore

also the tutotial should contain some guidance on when to use it and when not.
Also needs more DotNet core advertising - I know MS loves that

zaaack · 2018-03-02T15:06:18Z

@forki

any chance you cou try to add SSR to https://github.com/SAFE-Stack/SAFE-BookStore
The sample project actually is based on the SAFE-Stack template! I think I can send a pr to SAFE-BookStore if it's OK to have SSR as default in SAFE-Stack.

also the tutotial should contain some guidance on when to use it and when not.
Also needs more DotNet core advertising - I know MS loves that

Good advice, I think I can add some guidance in the tutorial, but I'm not sure how to add DotNet core advertising? Actually I'm not an experienced dotnet developer, not sure about how to do this right...

forki · 2018-03-02T15:07:27Z

that dotnet core advertising is something that we need to take to the MS guys. Don't worry about that.
You did fantastic work here!

Add SSR Support

9937047

alfonsogarciacaro reviewed Feb 27, 2018

View reviewed changes

zaaack force-pushed the master branch from 74c155c to e606a46 Compare February 27, 2018 15:49

Fix review

6593847

zaaack force-pushed the master branch from e606a46 to 6593847 Compare February 27, 2018 15:53

zaaack added 2 commits February 28, 2018 09:48

Add escapeHtml

25c4efe

Add data-reactroot

e47f9bb

alfonsogarciacaro reviewed Feb 28, 2018

View reviewed changes

alfonsogarciacaro mentioned this pull request Feb 28, 2018

Publish NuGet package with latest changes #67

Closed

zaaack force-pushed the master branch 3 times, most recently from e783262 to 376bc0b Compare February 28, 2018 15:25

Add React Component Support

ba2f35c

zaaack force-pushed the master branch 2 times, most recently from 30844e7 to 88f1b03 Compare March 1, 2018 03:47

zaaack force-pushed the master branch from 88f1b03 to 75191b0 Compare March 1, 2018 10:40

Support ofFunction

47d0d4f

zaaack force-pushed the master branch from 75191b0 to 47d0d4f Compare March 1, 2018 10:41

Remove useless code

d03d2be

Rename hybridView/hybridExec to isomorphicView/isomorphicExec

f6ceeb2

alfonsogarciacaro merged commit 38ae554 into fable-compiler:master Mar 1, 2018

zaaack mentioned this pull request Mar 2, 2018

Add withReactHydrate elmish/react#19

Merged

zaaack mentioned this pull request Mar 3, 2018

Update SSR tutorial and Sample #70

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Server Side Rendering Support #65

Add Server Side Rendering Support #65

zaaack commented Feb 27, 2018 •

edited

Loading

alfonsogarciacaro left a comment

alfonsogarciacaro Feb 27, 2018

alfonsogarciacaro Feb 27, 2018

alfonsogarciacaro Feb 27, 2018

zaaack commented Feb 28, 2018

alfonsogarciacaro Feb 28, 2018

alfonsogarciacaro Feb 28, 2018

zaaack Feb 28, 2018 •

edited

Loading

zaaack Feb 28, 2018

zaaack commented Mar 1, 2018 •

edited

Loading

alfonsogarciacaro commented Mar 1, 2018

zaaack commented Mar 1, 2018 •

edited

Loading

alfonsogarciacaro commented Mar 1, 2018

forki commented Mar 1, 2018 via email

forki commented Mar 2, 2018

zaaack commented Mar 2, 2018

forki commented Mar 2, 2018

		@@ -755,22 +804,21 @@ let inline ofFunction<[<Pojo>]'P> (f: 'P -> ReactElement) (props: 'P) (children:
		/// Example: `ofImport "Map" "leaflet" { x = 10; y = 50 } []`
		let inline ofImport<[<Pojo>]'P> (importMember: string) (importPath: string) (props: 'P) (children: ReactElement list): ReactElement =

Add Server Side Rendering Support #65

Add Server Side Rendering Support #65

Conversation

zaaack commented Feb 27, 2018 • edited Loading

Pure F#, No Nodejs Required!

Props

Cons

Elements support server-side rendering:

alfonsogarciacaro left a comment

Choose a reason for hiding this comment

alfonsogarciacaro Feb 27, 2018

Choose a reason for hiding this comment

alfonsogarciacaro Feb 27, 2018

Choose a reason for hiding this comment

alfonsogarciacaro Feb 27, 2018

Choose a reason for hiding this comment

zaaack commented Feb 28, 2018

alfonsogarciacaro Feb 28, 2018

Choose a reason for hiding this comment

alfonsogarciacaro Feb 28, 2018

Choose a reason for hiding this comment

zaaack Feb 28, 2018 • edited Loading

Choose a reason for hiding this comment

zaaack Feb 28, 2018

Choose a reason for hiding this comment

zaaack commented Mar 1, 2018 • edited Loading

alfonsogarciacaro commented Mar 1, 2018

zaaack commented Mar 1, 2018 • edited Loading

alfonsogarciacaro commented Mar 1, 2018

forki commented Mar 1, 2018 via email

forki commented Mar 2, 2018

zaaack commented Mar 2, 2018

forki commented Mar 2, 2018

zaaack commented Feb 27, 2018 •

edited

Loading

zaaack Feb 28, 2018 •

edited

Loading

zaaack commented Mar 1, 2018 •

edited

Loading

zaaack commented Mar 1, 2018 •

edited

Loading