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
This is a low level API intended for use by library authors. If you would like to use static site generation in your application we suggest making use of [Solid Start](https://start.solidjs.com/getting-started/what-is-solidstart) our meta-framework that makes adding server side rendering to your appkication extremely easy.
@@ -10,23 +10,23 @@ In this section we will be talking about static site generation and how you can
10
10
11
11
## What is Static Site Generation?
12
12
13
-
Static site generation is the process of generating a static (never changing) HTML website based on raw data and templates developed using web development frameworks like Solid.js.
13
+
Static site generation is the process of generating a static (never changing) HTML website based on raw data through the use of web development frameworks like Solid.js.
14
14
15
15
Static sites are made up of HTML that loads up the same way every time, in opposition to dynamic website where data on the site can change based on the user input or changes in fetched data.
16
16
17
17
## How does Solid.js implement SSG?
18
18
19
-
Solid.js makes use of the [renderToStringAsync](/references/concepts/ssr/async-ssr) function in order to load all the asynchronous data and generate the HTML required.
19
+
Solid.js makes use of the [`renderToStringAsync`](/references/concepts/ssr/async-ssr) function in order to load all the asynchronous data and generate the HTML required.
20
20
21
-
You might be wondering what makes this any different from Async SSR then? Well the key difference between this and Async SSR is that in Async SSR the server runs the Solid.js app while in SSG the output is stored ahead of time and the Solid.js code isn't touched again aside from in build time during updates.
21
+
You might be wondering what makes this any different from Async SSR then? Well the key difference between this and Async SSR is that in Async SSR the server runs the Solid.js app while in SSG the Solid.js app is compiled and has it's ouput stored ahead of time. Meaning the Solid.js code isn't touched again aside from in build time during updates.
22
22
23
23
This might sound a little vague and hard to understand so here's an example of how it looks in action.
24
24
25
25
## How to use SSG in Solid.js?
26
26
27
-
<Asidetype="general"> This process of implementing SSG in Solid.js is more complicated that implementing any other form of SSR, so please follow along carefully </Aside>
27
+
<Asidetype="general"> This process of implementing SSG in Solid.js is more complicated when compared to implementing other forms of SSR in Solid.js, so please follow along carefully </Aside>
28
28
29
-
In order to make use of SSG in Solid.js you'll need to have a bundler that helps in bundling JS code. In this example we will be making use of Rollup.
29
+
In order to make use of SSG in Solid.js you'll need to have a compiler that helps in compiling JS code. In this example we will be making use of Rollup.
30
30
31
31
```js
32
32
// rollup.config.js
@@ -83,7 +83,7 @@ export default [
83
83
];
84
84
```
85
85
86
-
In the code above we're setting up rollup to help us bundle our code by turning all the jsx we have into compiled javascript that we'll be able to later run using `node`
86
+
In the code above we're setting up rollup to help us compile our code by turning all the jsx we have into compiled javascript that we'll be able to later run using `node`
87
87
88
88
Next let's create our `App.jsx`
89
89
@@ -99,7 +99,7 @@ export default function App() {
99
99
}
100
100
```
101
101
102
-
Above is a simple component. You can make use of asynchronous data if you would like to since we'll be making use of the `renderToStringAsync` function.
102
+
Above is a simple component. You can make use of asynchronous data if you would like to since we'll be making use of the `renderToStringAsync` function all asynchronous data will be fetched and put in place before building the site.
103
103
104
104
Now we'll be creating an index.js file which rollup will be compiling and turning into a CommonJS file with all the jsx and tsx code transformed, compiled and ready to run.
105
105
@@ -141,7 +141,7 @@ renderStatic(
141
141
142
142
This will help us generate our static files using the `renderStatic` function provided by the `solid-ssr` package.
143
143
144
-
Now all that's left is to build, run our script and serve our static site.
144
+
Now all that's left is to compile our code, run our script and serve our static site.
145
145
146
146
```bash
147
147
npx rollup -c rollup.config.js && node generate.js #compile and generate the site
0 commit comments