Download as PDF, PPTX
![/pages/index.js
static async getInitialProps() {
let query = `
{
frontpage: location(id: ${id}) {
content {
fields(identifier: ["title", "body"]) {
fieldDefIdentifier,
value {
... on TextLineFieldValue {
text
}
... on RichTextFieldValue {
html5
}
... on ImageFieldValue {](https://image.slidesharecdn.com/easydecoupledsitebuildingwithgraphqlandnext-170922064913/85/Easy-Decoupled-Sitebuilding-with-GraphQL-and-Next-js-11-320.jpg)
Uploaded byJani Tarvainen
Easy Decoupled Sitebuilding with GraphQL and Next.js
The document discusses decoupled sitebuilding using GraphQL and Next.js, emphasizing their integration for efficient content management. It highlights the pros and cons of using these technologies, including the learning curve, SEO benefits, and potential vulnerabilities. Resources and examples are provided, alongside reflections on personal experiences in employing these tools at tech conferences.
More Related Content
Similar to Easy Decoupled Sitebuilding with GraphQL and Next.js
Easy Decoupled Sitebuilding with GraphQL and Next.js
- 1. EASY DECOUPLED SITEBUILDING WITH GRAPHQLAND NEXT.JS Jani Tarvainen, September 2017 (Helsinki.js Meetup & DrupalCon Vienna)
- 2. About me, JaniTarvainen Personal branding @velmu Web development for 20y+ Interested in all things tech and around it Currently working mostly with content thingamajigs Working knowledge of TS/JS and Symfony/PHP Day job at , night job at eZ Systems Malloc
- 3. Agenda What is DecoupledSitebuilding? Intro to and Walkthrough of React Rauma 2017 site My experiences: the good, the bad & the ugly GraphQL Next.js
- 4. What is DecoupledSitebuilding? Also known as Headless, API driven, who knows... A Content API of some sorts provides a feed Traditionally REST based (or a JSON kludge) Strong buzz for some years, but not the norm Content management is cost driven, you need efficiency Boutique solutions out of question for mainstream
- 5. GraphQL and Next.js Twoseparate technologies that work well together Opinionated to reduce & 1st load from SSR HTML, subsequent from a GraphQL API built in a similar way, but not on Next.js Not the only options, some alternatives: Vue.js clone of Next: An alternative to GraphQL: Something around Web Components, ish rendering? Yak Shaving Bikeshedding Economist.com Nuxt.js Falcor lit-html
- 6. GraphQL, 1st releasein 2015 GraphQL is "a query language for your API" Not "SQL" for Graph Databases (but it ) A REST alternative, not verb based (only POSTs) Implementations for many CMSes & Content APIs Can minimise HTTP-round trips by embedding resources Intro video: can be Zero to GraphQL in 30 Minutes
- 7. Next.js, 1st releasein 2016 A JavaScript framework with routing, etc. Uses React.js as a universal view layer Run the same code on server and client Simple to get started with, but customizable Intro video: Next.js: Universal React Made Easy & Simple
- 8. Walkthrough of ReactRauma 2017 https://react.nu/ A site for a tech conference in October 2017 in Rauma Resources: eZ Platform GraphiQL backend React Rauma 2017 site (react.nu) Site source on GitHub
- 9. /pages/about.js export default ()=> ( <Layout> <Head> <title>Tietoa maailman suurimmasta Suomenkielisestä React -konferenssis </Head> <main> <h1>Tietoa maailman suurimmasta Suomenkielisestä React -konferenssista <p>Onks tää joku vitsi?! No tavallaan.</p> </main> <aside> <Link href="/"><a>Etusivulle</a></Link> </aside> </Layout> ); maps to http://localhost:3000/about
- 10. /server.js app.prepare().then(() => { createServer((req,res) => { const { pathname, query } = parse(req.url, true); const params = match(pathname); if (params === false) { handle(req, res); return; } app.render(req, res, "/activity", Object.assign(params, query)); }).listen(port, err => { if (err) throw err; console.log(`> Ready on http://localhost:${port}`); }); }); You can also use Express, Koa, etc.
- 11. /pages/index.js static async getInitialProps(){ let query = ` { frontpage: location(id: ${id}) { content { fields(identifier: ["title", "body"]) { fieldDefIdentifier, value { ... on TextLineFieldValue { text } ... on RichTextFieldValue { html5 } ... on ImageFieldValue {
- 12. /pages/index.js render(){ let fields =simplifyFields(this.props.data.frontpage.content.fields); return ( <Layout> <Head> <title>{fields.title}</title> </Head> <main> <h1>{fields.title}</h1> {Parser(fields.body)} </main> <aside> <Navigation title="Ohjelmaa" items={this.props.data.activitie </aside> </Layout>
- 13. /components/Navigation.js import React from"react"; import Link from "next/link"; import { simplifyLinks } from "../lib/contentUtils"; export default ( {items,title} ) => ( <nav> <h2>{title}</h2> <ul> {items.map(item => ( <li key={item.content.id}> <Link href={"/activity?id=" + item.content.id} as={"activity/" + item.content.id} > <a>{item.content.name}</a> </Link> </li>
- 14. The Good Allows learningnew things with standardisation I like + Next.js is opinionated, but flexible enough for me No compromise SEO & UIs for sites and eCommerce Integrate rich features and common patterns, state management, etc, within a familiar JavaScript workflow React as a templating engine static HTML exports
- 15. The bad There's learningcurve for JavaScript, JSX, etc. Losing CMS capabilities for layout mgmt, theming, etc. Can be complex to do simple things like analytics, etc. Regular HTTP caching strategies not valid with GraphQL Development for server+browser can be quirky Hahaa Facebook, à la ReactGraphQL patents drama
- 16. The Ugly Does thisprovide any value for content focused sites? Slow(er) 1st load without static HTTP caching React rendering pushes CPU bound server workload API calls in the backend block sending ANYTHING to the client I imagine SSR+SPA caching with sessions, etc. not trivial A GraphQL API is open and tells anyone what it can do And endpoint can reveals sensitive resources DOS by making queries to overload backend Vulnerable to "GraphQL injections"
- 17. THE END Questions? Slides: React Rauma2017: Thank you https://janit.iki.fi/cms-graphql-nextjs https://react.nu