Improve Server-Side-Rendering without local files

resources/viewer-js-hash

@@ -1 +1 @@
-4Kste8ucG3EQsyd3FbP7jhu8QLSd
+2gTexRr3NErDFp5AVT3YgDy9rssr

shadow-cljs.edn

@@ -2,7 +2,7 @@
  :dev-http {7778 {:roots ["public" "classpath:public"]}}
  :nrepl false
  :builds {:viewer {:target :esm
-                   :runtime :browser ;; needed when developing ssr, node errors without it
+                   :runtime :browser ;; `:custom` needed when developing ssr, will see WebSocket errors without it
                    :output-dir "public/js"
                    :release {:output-dir "build/"}
                    :compiler-options {:source-map true}

src/nextjournal/clerk.clj

@@ -351,7 +351,7 @@
 
 (defn ^:private normalize-opts [opts]
   (set/rename-keys opts #_(into {} (map (juxt identity #(keyword (str (name %) "?")))) [:bundle :browse :dashboard])
-                   {:bundle :bundle?, :browse :browse?, :dashboard :dashboard? :compile-css :compile-css?}))
+                   {:bundle :bundle?, :browse :browse?, :dashboard :dashboard? :compile-css :compile-css? :ssr :ssr?}))
 
 (defn ^:private started-via-bb-cli? [opts]
   (contains? (meta opts) :org.babashka/cli))
@@ -422,9 +422,11 @@
   Passing at least one of the above is required. When both `:paths`
   and `:paths-fn` are given, `:paths` takes precendence.
 
-  - `:bundle`    - if true results in a single self-contained html file including inlined images
-  - `:browse`    - if true will open browser with the built file on success
-  - `:dashboard` - if true will start a server and show a rich build report in the browser (use with `:bundle` to open browser)
+  - `:bundle`      - if true results in a single self-contained html file including inlined images
+  - `:compile-css` - if true compiles css file containing only the used classes
+  - `:ssr`         - if true runs react server-side-rendering and includes the generated markup in the html
+  - `:browse`      - if true will open browser with the built file on success
+  - `:dashboard`   - if true will start a server and show a rich build report in the browser (use with `:bundle` to open browser)
   - `:out-path`  - a relative path to a folder to contain the static pages (defaults to `\"public/build\"`)
   - `:git/sha`, `:git/url` - when both present, each page displays a link to `(str url \"blob\" sha path-to-notebook)`
   "
@@ -437,16 +439,11 @@
                              :browse {:desc "Opens the browser on boot when set."}
                              :dashboard {:desc "Flag to serve a dashboard with the build progress."}
                              :out-path {:desc "Path to an build output folder, defaults to \"public/build\"."}
+                             :ssr {:desc "Flag to run server-side-rendering to include pre-rendered markup in html output."}
+                             :compile-css {:desc "Flag to run tailwindcss to compile a minimal stylesheet containing only the used classes."}
                              :git/sha {:desc "Git sha to use for the backlink."}
-                             :git/url {:desc "Git url to use for the backlink."}
-                             :compile-css {:desc "Flag to compile all viewer stylesheets and add a minimized CSS file to the output folder.
-
-Assumes tailwind installed, as per
-```
-npm install -D tailwindcss @tailwindcss/typography
-```
-"}}
-                      :order [:paths :paths-fn :index :browse :bundle :dashbaord :out-path :git/sha :git/url :compile-css]}}
+                             :git/url {:desc "Git url to use for the backlink."}}
+                      :order [:paths :paths-fn :index :browse :dashbaord :compile-css :ssr :bundle :out-path :git/sha :git/url]}}
   [build-opts]
   (if (:help build-opts)
     (if-let [format-opts (and (started-via-bb-cli? build-opts) (requiring-resolve 'babashka.cli/format-opts))]

src/nextjournal/clerk/builder.clj

@@ -121,14 +121,17 @@
         path->url (into {} (map (juxt identity #(cond-> (->> % (view/map-index opts) strip-index) (not bundle?) ->html-extension))) paths)]
     (assoc opts :bundle? bundle? :path->doc path->doc :paths (vec (keys path->doc)) :path->url path->url)))
 
-
 (defn ssr!
   "Shells out to node to generate server-side-rendered html."
   [static-app-opts]
-  (when-not (fs/exists? "build/viewer.js")
-    (spit "build/viewer.js" (slurp (@config/!asset-map "/js/viewer.js"))))
-  (spit "clerk_ssr.js" "import './build/viewer.js';console.log(nextjournal.clerk.static_app.ssr(process.argv[2]))")
-  (let [{:as ret :keys [out err exit]} (sh "node" "--abort-on-uncaught-exception" "clerk_ssr.js" (pr-str static-app-opts))]
+  (let [{:as ret :keys [out err exit]}
+        (sh "node"
+            "--abort-on-uncaught-exception"
+            "--experimental-network-imports"
+            "--input-type=module"
+            "--eval"
+            (str "import '" (@config/!asset-map "/js/viewer.js") "';"
+                 "console.log(nextjournal.clerk.static_app.ssr(" (pr-str (pr-str static-app-opts)) "))"))]
     (if (= 0 exit)
       (assoc static-app-opts :html out)
       (throw (ex-info (str "Clerk ssr! failed\n" out "\n" err) ret)))))