Arun A

1653394096

Static Site Generators: Gatsby vs. Next.js in 2022

In web development, static site generators have become a hot topic, and they have dramatically improved. They are pretty simple to use and come with a number of features out of the box to build super-fast, lightweight web applications.

In this article, I will walk you through two of the most popular static site generators for React, Gatsby, and Next.js, and help you choose the best for your next project.

What is Gatsby?

More than a static site generator, Gatsby is a modern front-end framework built on top of React, GraphQL, and Webpack.

Gatsby helps us to create websites that generate static HTML in advance and store it on content delivery networks (CDNs) all over the world for faster accessibility. For example, it doesn’t need a server or database to load a blog website. Furthermore, it uses various techniques, including asset optimization, server-side rendering, data pre-fetching, and code splitting, to load pages rapidly.

Although Gatsby is built on top of React, it has its own ecosystem with plugins, themes, and starters like any other framework. When working with the Gatsby ecosystem, a developer has the privilege of creating a website in numerous ways. In addition, Gatsby plugins can enhance and modify anything Gatsby can handle.

The benefits of using Gatsby

  • Websites are faster.
  • Gatsby takes care of other requirements once the source code is created by compiling the most effective webpack configuration to build the site.
  • Follows Google’s PRPL (push, render, pre-cache, lazy-load) architectural pattern.
  • Doesn’t allow the scope of direct connection to the database, user data, dependencies, and other sensitive information, ensuring security.
  • Minimized hosting and update costs.

What is Next.js?

Next.js is a server-side rendering (SSR) tool, but with version 9.3, it also supports static site generation. The idea behind it is to create server-rendered React apps that require minimal to no configuration.

Next.js is more about enhancing the developer experience by making it simpler to create comprehensive, SSR-friendly web applications. Although Next.js facilitates static builds, that isn’t its main focus. We can use Next.js when a website should handle both SSR and static page optimization. It doesn’t come with any unnecessary tools or make any assumptions about how you want to manage your data.

Next.js is the best tool for creating dynamic websites that have healthy server interactions. It gives you more flexibility when it comes to building apps with features like single-file components, automatic code-splitting, and hot code reloading.

The benefits of using Next.js

  • Supports server-side rendering (SSR).
  • Built-in CSS support.
  • Image, font, and script optimization.
  • Hot module replacement (HMR) enables developers to see all changes as they are made during development.
  • Provides a host of ready-to-use components to fast-track a minimum viable product.

Similarities Between Gatsby and Next.js

Despite the fact that Gatsby and Next.js are designed to handle different situations, they have a lot in common.

  • Developer experience: The learning curve for both frameworks isn’t too steep, and both frameworks prioritize the developer experience. We can easily set up and get things running and bringing more functionality to basic apps is straightforward thanks to the rich documentation provided by both frameworks. Both support hot reloading for a more efficient development process.
  • Appealing features: Caching and performance are already built into both. We don’t have to bother with code splitting or optimization, as code splitting works by default, depending on the page route. Both frameworks have an integrated routing mechanism to generate new pages.
  • Powerful websites: When you scroll down the page, both frameworks perform intelligent page loading by asynchronously prefetching the links for the next pages. For well-built Gatsby and Next.js pages, the Lighthouse score will be remarkable, so the websites will be SEO-friendly.

Since we’ve discussed the benefits and some features of both Gatsby and Next.js, let’s look at choosing one of them.

When to use Gatsby

Gatsby thrives in building static websites. A static website contains a sequence of HTML pages, each of which represents a single webpage (e.g., a personal blog). Gatsby is ideal for creating these websites because the number of pages is predetermined, and the content does not vary. Also, Gatsby is compatible with a wide range of CMS systems, REST APIs, databases, and GraphQL.

As Gatsby isolates the data changes from the website content, even a non-developer can modify data relevant to the webpage from the back end. Then, it will assemble the changes in the runtime. In addition, it removes the need for code freezes.

Gatsby is the recommended framework for developing static websites due to its capability to integrate with a CMS via a large collection of Gatsby plugins, starters, and themes. Gatsby also compresses the development lifecycle.

When to use Next.js

Next.js is an excellent pick if you’re building a website where many users will create user accounts and subsequently comment on the page contents.

Multiple users may log in at any time on these websites, making it hard to develop a static page in real time. In this scenario, static HTML will need to be compiled for each user. Gatsby’s lengthy build time makes it an unsuitable platform for such applications.

You have to display unique, dynamic content for specific logged-in users on websites like this. Server-side rendering will make it easier to serve a diverse group of users based on authentication, and each user will be able to see their own information immediately as they generate it on the website.

So, it appears to be a straightforward choice: Use Gatsby for static webpages and Next.js for huge, multiuser websites.

But what if you’re building a hybrid web app?

The best option for hybrid web apps

Next.js outperforms Gatsby when it comes to building hybrid web applications that require both SSR and client-side rendering. Also, most web pages must be streamlined for search engines, and the material on these pages is frequently dynamic; Next.js is the preferable framework.

We can use Next.js to create an ideal e-commerce web app since it blends the benefits of both static site generation and server-side rendering.

Conclusion

I discussed the features, benefits, and use cases of both Gatsby and Next.js throughout this article. Both are remarkable frameworks that come with their own pros and cons. I believe the choice between Gatsby and Next.js should always depend on your project requirements. Choose the one that best fits your needs. For more insights, I recommend looking over their documentation.

Furthermore, since Gatsby is a framework with a large number of themes, plugins, and templates, developers who want to create a fully functional app or website in a short period of time tend to choose Gatsby over Next.js.

Don’t hesitate to let us know your experience working with these two frameworks in the comments section. Thank you for reading!

The Syncfusion React suite offers over 70 high-performance, lightweight, modular, and responsive UI components in a single package. It’s the only suite you’ll ever need to construct a complete application.

If you have questions, you can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

https://www.syncfusion.com/blogs/post/static-site-generators-gatsby-vs-next-js-in-2022.aspx

What is GEEK

Buddha Community

Static Site Generators: Gatsby vs. Next.js in 2022
JavaScript Daily

JavaScript Daily

1632537859

NBB: Ad-hoc CLJS Scripting on Node.js

Nbb

Not babashka. Node.js babashka!?

Ad-hoc CLJS scripting on Node.js.

Status

Experimental. Please report issues here.

Goals and features

Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.

Additional goals and features are:

  • Fast startup without relying on a custom version of Node.js.
  • Small artifact (current size is around 1.2MB).
  • First class macros.
  • Support building small TUI apps using Reagent.
  • Complement babashka with libraries from the Node.js ecosystem.

Requirements

Nbb requires Node.js v12 or newer.

How does this tool work?

CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).

Usage

Install nbb from NPM:

$ npm install nbb -g

Omit -g for a local install.

Try out an expression:

$ nbb -e '(+ 1 2 3)'
6

And then install some other NPM libraries to use in the script. E.g.:

$ npm install csv-parse shelljs zx

Create a script which uses the NPM libraries:

(ns script
  (:require ["csv-parse/lib/sync$default" :as csv-parse]
            ["fs" :as fs]
            ["path" :as path]
            ["shelljs$default" :as sh]
            ["term-size$default" :as term-size]
            ["zx$default" :as zx]
            ["zx$fs" :as zxfs]
            [nbb.core :refer [*file*]]))

(prn (path/resolve "."))

(prn (term-size))

(println (count (str (fs/readFileSync *file*))))

(prn (sh/ls "."))

(prn (csv-parse "foo,bar"))

(prn (zxfs/existsSync *file*))

(zx/$ #js ["ls"])

Call the script:

$ nbb script.cljs
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs

Macros

Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:

(defmacro plet
  [bindings & body]
  (let [binding-pairs (reverse (partition 2 bindings))
        body (cons 'do body)]
    (reduce (fn [body [sym expr]]
              (let [expr (list '.resolve 'js/Promise expr)]
                (list '.then expr (list 'clojure.core/fn (vector sym)
                                        body))))
            body
            binding-pairs)))

Using this macro we can look async code more like sync code. Consider this puppeteer example:

(-> (.launch puppeteer)
      (.then (fn [browser]
               (-> (.newPage browser)
                   (.then (fn [page]
                            (-> (.goto page "https://clojure.org")
                                (.then #(.screenshot page #js{:path "screenshot.png"}))
                                (.catch #(js/console.log %))
                                (.then #(.close browser)))))))))

Using plet this becomes:

(plet [browser (.launch puppeteer)
       page (.newPage browser)
       _ (.goto page "https://clojure.org")
       _ (-> (.screenshot page #js{:path "screenshot.png"})
             (.catch #(js/console.log %)))]
      (.close browser))

See the puppeteer example for the full code.

Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.

Startup time

$ time nbb -e '(+ 1 2 3)'
6
nbb -e '(+ 1 2 3)'   0.17s  user 0.02s system 109% cpu 0.168 total

The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.

Dependencies

NPM dependencies

Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.

Classpath

To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [foo.bar :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.

To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:

$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"

and then feed it to the --classpath argument:

$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]

Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.

Current file

The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:

(ns foo
  (:require [nbb.core :refer [*file*]]))

(prn *file*) ;; "/private/tmp/foo.cljs"

(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"

Reagent

Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:

$ npm install ink

ink-demo.cljs:

(ns ink-demo
  (:require ["ink" :refer [render Text]]
            [reagent.core :as r]))

(defonce state (r/atom 0))

(doseq [n (range 1 11)]
  (js/setTimeout #(swap! state inc) (* n 500)))

(defn hello []
  [:> Text {:color "green"} "Hello, world! " @state])

(render (r/as-element [hello]))

Promesa

Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:

(ns prom
  (:require [promesa.core :as p]))

(defn sleep [ms]
  (js/Promise.
   (fn [resolve _]
     (js/setTimeout resolve ms))))

(defn do-stuff
  []
  (p/do!
   (println "Doing stuff which takes a while")
   (sleep 1000)
   1))

(p/let [a (do-stuff)
        b (inc a)
        c (do-stuff)
        d (+ b c)]
  (prn d))

$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while
3

Also see API docs.

Js-interop

Since nbb v0.0.75 applied-science/js-interop is available:

(ns example
  (:require [applied-science.js-interop :as j]))

(def o (j/lit {:a 1 :b 2 :c {:d 1}}))

(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1

Most of this library is supported in nbb, except the following:

  • destructuring using :syms
  • property access using .-x notation. In nbb, you must use keywords.

See the example of what is currently supported.

Examples

See the examples directory for small examples.

Also check out these projects built with nbb:

API

See API documentation.

Migrating to shadow-cljs

See this gist on how to convert an nbb script or project to shadow-cljs.

Build

Prequisites:

  • babashka >= 0.4.0
  • Clojure CLI >= 1.10.3.933
  • Node.js 16.5.0 (lower version may work, but this is the one I used to build)

To build:

  • Clone and cd into this repo
  • bb release

Run bb tasks for more project-related tasks.

Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb 
License: EPL-1.0

#node #javascript

Eva Murphy

Eva Murphy

1625674200

Google analytics Setup with Next JS, React JS using Router Events - 14

In this video, we are going to implement Google Analytics to our Next JS application. Tracking page views of an application is very important.

Google analytics will allow us to track analytics information.

Frontend: https://github.com/amitavroy/video-reviews
API: https://github.com/amitavdevzone/video-review-api
App link: https://video-reviews.vercel.app

You can find me on:
Twitter: https://twitter.com/amitavroy7​
Discord: https://discord.gg/Em4nuvQk

#next js #js #react js #react #next #google analytics

Vincent Lab

Vincent Lab

1605177550

Building a Static Website with Hugo

#hugo #static #site #generator #markup #static site generator

Kabanda Nat

Kabanda Nat

1624874066

How to Choose the Best Static Site Generator Between Gatsby and Gridsome

Benefits of Using Static Site Generators

  • Talking about the advantages of using static site generators, then there are so many. Comparing to the Traditional dynamic websites, it improves the loading speed and overall website performance to a greater extent.
  • Static site generator improves the loading speed of the website since it generates your website’s pages during build time instead of real-time.
  • Static site generators are known for its high-end security since it only uses a set of static assets that can be served using a simplified webserver.
  • Static site generator’s architecture optimized for scaling by default due to the presence of a pre-build site, everything would be cached using CDN and served directly to the website visitors.
  • The use of a static site generator reduces the extra cost of hosting bills, as here you can serve the static sites using the CDNs.

#best static site generator #gatsby vs gridsome #web dev

Erna Herzog

Erna Herzog

1626645300

Gatsby JS Course: Gatsby Source Filesystem

Setup Gatsby filesystem to make sure Gatsby is aware of application local files so you can access them via GraphQL.

This is a single video in a series of 26 lessons. Watch the entire course at this playlist here: https://www.youtube.com/playlist?list=PLW0RabRDhwwzVNhlOgQQgw6HJzXdM1MnT

Want to support the channel? We make our courses free to watch so anyone can access our content and level up their skills. For our larger courses, like this one, we sell the final code and design files for a small price to help support the creation of free educational content like this.

You can purchase the course files below–any support is greatly appreciated!

#WebDev #WebDesign #WebDevelopment

#gatsby js #gatsby #js #webdev