blog.mahoroi.com

NuxtにできなくてGridsomeにできること？

-

@Maxhodges: 某 developer が、静的サイトジェネレーターの Nuxt でできないことは Gridsome もできないって言ってたけど信じていいの？

a developer tells me gridsome can't do anything that NUXT can't do regarding static site generation. Should I believe him?

@hjvedvik: できること基準で Nuxt と Gridsome は比較できないと思うよ。

I don't think we can compare Nuxt and Gridsome based on what they can do. It's how you create a website that is the main differences between them :)

@renestalder: Nuxt 使いの自分も興味があるので、自分の中の疑問点を詳しく述べるよ。

  • ページ間のアニメーションはできる？
  • 静的に生成したとき、ルーティング時にクライアントサイドで非同期にデータを取得できる？ それとも常に静的ファイルがロードされる？
  • Gridsome で TypeScript は使える？

Okay let's elaborate on that because I'm also interested as I'm only used to Nuxt and have problems to find the answers to my questions.

  • Can I animate between pages?
  • When statically generated, on routing, is the framework able to load data async on client-side or will always the static file be loaded?
  • Can I use Gridsome with TypeScript?

@hjvedvik:

  • ページ遷移については取組中
  • ブラウザでは Vue.js が動くから、API のデータも読み込める
  • Gridsome は TypeScript で書かれてないけど、webpack の設定で TypeScript も動作可能

Nuxt はグレートなフレームワークでどんなものに対しても構築可能だよね。一方で、Gridsome は静的コンテンツが主になる web サイトにより注力してる。

例えば、CMS からコンテンツを簡単に扱えるようになるプラグインや、コンポーネントにデータを簡単に渡すことができる GraphQL データ層、動的なルートも自動でレンダーされて、ページネーションや分類はクエリに少しだけ変数を追加してやれば実装可能。ローカルの画像は自動で最適化されてブラウザでは遅延読み込みされる。これら全てをロジカルなコードを書かなくでも達成できる。こういった一般的な事例を解決しようとしてるんだ。

Date Store API を使えばカスタム API からのデータに挿入することもできるけど、1.0 リリース前に高度な使用方法のためのメソッドを公開する予定だよ。

静的出力すると、アプリは vue、vue-router、vue-meta、Gridsome からの遅延読み込み画像、事前読み込みデータといくつかのコンポーネントのみが含まれる。Vue.js はマークアップを消し去って、ブラウザ上ではほぼなんでもできる SPA に変身する。データも全て JSON としてレンダリングされて各ルートの前にフェッチされるから、生成時に CMS にアクセスする必要もなし。

  • We are working on a solution for page transitions.
  • Vue.js runs in the browser so you can load data from APIs.
  • I haven't tried Gridsome with Typescript, but it should work with custom webpack config.

While Nuxt is a great framework and configurable to create anything you want, Gridsome is more focused on websites that contain mostly static content. We try to solve > common problems for most use cases; Source plugins make it easy to use content from CMS'es (more plugins are coming). And a GraphQL data layer lets you easily access the data in any component. All routes are rendered automatically, including dynamic routes. Pagination for collections and taxonomy pages can be implemented with just a few variables in your query. Local images can be optimized automatically and lazy-loaded in the browser. All this can be achieved without writing any logical code.

You can use the Data Store API to insert data from custom APIs, but we are going to open up methods for more advanced usage before a 1.0 release.

When statically generated, the app only contains vue, vue-router and vue-meta with minimal custom code from gridsome to lazy-load images and preload data plus a few components. Vue.js hydrates the markup and turns into a SPA which allows you to do almost anything in the browser. All data is also rendered as static JSON and fetched before each route, so there is no connection with the CMS'es when generated. And only data you query for is rendered.

@tomtev: @hjvedvik が言ったように、Gridsome はどんなデータソースを使う静的サイトでも、その構築を簡単にしようとしてるんだ。Gridsome と Nuxt を比較するためには、nuxt generate と比較する必要がある。

最大の違いはデータの扱い方

Nuxt では各ルートで API を直接フェッチする。この API は外部の rest API もしくは GraphQL API からになる。その方法は developer 次第だ。

例えば、ページネーション付きのブログを Nuxt で構築するために必要なこと

  • /pages/blog/index.vue ファイルの作成と、API からブログの記事をフェッチする
  • ページネーション機能を手動で作成する
  • /pages/blog/_id を作成して、:id をルート変数として API へフェッチする

個人的にだけど、Nuxt (Generate) 最大の問題は、ページが読み込まれたあとにクライアント側ではいつも API にアクセスすることなんだ。例えそれが静的であってもね。Nuxt チームがこの問題修正に取り組んでいることは知ってるけど、これはいまの方法。もちろん、すぐに修正する方法もあるとは思うけど。

Gridsome ではビルド時、もしくは開発サーバーの起動時にすべてのデータを取得して、内部の GraphQL データ層に渡す。次に GraphQL クエリを使って、このデータ層からページにデータを追加する。API エンドポイントの追加なんて必要ないんだ。

データソースプラグインは、Gridsome でデータを追加して操作することをできるだけ簡単にするように設計されている。例えば、WordPress に接続するとしよう。WordPress の投稿記事、カテゴリ、タグをすぐ使うことができる。

Gridsome でブログを構築するために必要なこと

  • /pages/Blog.vue ファイルの作成と、必要なコレクション用の GraphQL クエリを追加する。GraphQL Playground のおかげで、クエリのテストができるので、これはとても簡単。
  • GraphQL クエリ用のビルドイン ページネーションの使用。blog/1、blog/2 などのアーカイブページも機能する。
  • GraphQL コレクション用のテンプレートとなる /templates/TheCollectionName.vue の作成。

Gridsome は、ページごとではなく前もってデータを取得する方法があるため、ページをより高速に生成する必要もある。

Like what @hjvedvik said, Gridsome tries to simplify building modern, static websites for any data source. To compare Gridsome and Nuxt you also need to compare it to nuxt generate.

The biggest difference between is probably how you work with data.

In Nuxt you fetch directly from APIs per route. This can be from an external rest API or GraphQL API. It’s up to the developer on how to do this.

For example, to create a blog with pagination in Nuxt you’ll need to:

  • Create a /pages/blog/index.vue file and fetch blog posts into this from any API.
  • Manually create pagination functionality.
  • Create a /pages/blog/_id and fetch from any API by using :id route param as a variable.

The biggest problem with Nuxt (Generate), in my opinion, is that it always fetches from the API on client-side after page load, even if it's static. I know they are working on fixing this, but this is how it is now. There could, of course, be some quick fixes for this.

In Gridsome you fetch all data at build time, or when starting development server, into an internal GraphQL data layer and THEN you start adding data to pages from this data layer with GraphQL queries. You don't need to deal with any API endpoints.

Data source plugins are designed to make it as easy as possible to add and work with data in Gridsome. For example, if you connect to a WordPress site you can get posts, categories & tags connections out-of-the-box.

To create a blog in Gridsome you’ll need to:

  • Create a /pages/Blog.vue file and add a GraphQL query for the collection you want. This is super easy thanks to the GraphQL Playground where you can build and test queries.
  • Use the built-in pagination for the GraphQL query, so archive pages like blog/1 blog/2 etc. works.
  • Create a /templates/TheCollectionName.vue that will automatically be the template for the GraphQL collection.

Gridsome should also generate pages faster because of how it fetches data up front instead of per page.

@Maxhodges: ありがとう。すごく参考になった。いつかドキュメントにするのに役立つかも！

thanks everyone. this is very helpful. could be some useful content to distill into docs one day!

まとめ

Nuxt.js は対応範囲が広い。Gridsome は静的サイトに特化している。

アプリケーション作るときは Nuxt.js、ブログ作るときは Gridsome。

余談

Nuxt (Generate) の問題として、静的出力しても API データはそのままだという指摘がありましたが、Full static generated mode が実装されるとこの問題は解消されそうです。

ともあれ、Gridsome 0.5 リリース 🎉

参考