Next.js

React na serveru

twitter: @josefrousek

Proč SSR?

Co je Next.js

// Populate ./pages/index.js inside your project:

export default () => <div>Welcome to next.js!</div>

Jak se dostat k datům

https://arunoda.me/blog/ssr-and-server-only-modules

  static getInitialProps ({ req }) {
    if (req) {
      // Runs only in the server
      const faker = require('faker')
      const name = faker.name.findName()
      return { name }
    }

    // Runs only in the client
    return { name: 'Arunoda' }
  }

tohle nestačí

package.json

{
  ...
  "browser": {
    "faker": false
  }
  ...
}

Workshop

const Photo = styled.img`
  width: 50px;
`;

const Heading = styled.h1`
  margin: 0 1rem;
`;

const Profile = styled(({ className, profile }) =>
  <div className={className}>
    <Heading>{profile.name || profile.login}</Heading>
    <Photo src={profile.avatar_url} />
  </div>,
)`
  display: flex;
  align-items: center;
`;

export default Profile;

const Profile = styled(({ className, profile }) =>
  <div className={className}>
    <h1>{profile.name || profile.login}</h1>
    <img src={profile.avatar_url} />
  </div>,
)`
  display: flex;
  align-items: center;

  h1 {
    margin: 0 1rem;
  }

  img {
    width: 50px;
  }
`;

export default Profile;

const Profile = styled.div`
  display: flex;
  align-items: center;

  h1 {
    margin: 0 1rem;
  }

  img {
    width: 50px;
  }
`;

export default ({ profile }) =>
  <Profile>
    <h1>{profile.name || profile.login}</h1>
    <img src={profile.avatar_url} />
  </Profile>,
);

GraphQL

type Project {
  name: String
  tagline: String
  contributors: [User]
}

Describe your data

{
  project(name: "GraphQL") {
    tagline
  }
}

Ask for what you want

{
  "project": {
    "tagline": "A query language for APIs"
  }
}

Get predictable results

https://kiwi-graphiql.now.sh/

https://kiwi-graphql-voyager.now.sh

twitter: @josefrousek

https: rousek.name