JSONで取得したデータをコレクションビューに表示させたいがスクロールしないと表示されない

やりたいこと

添付画像の右側のように、Alamofireを使って取得したJSONデータをコレクションビューに表示したいです。

困っていること

起動すると添付画像の左側のようにセルの枠のみ表示されている状態になります。
しかし、画面をスクロールして戻すと思ったような表示になってしまいます。
起動時から右側のように表示させるにはどうしたら良いでしょうか？

コード

swift
1//CatalogViewController.swift
2
3import UIKit
4import Alamofire
5import SwiftyJSON
6
7class CatalogViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
8    
9    @IBOutlet weak var displayToken: UILabel!
10    @IBOutlet weak var collectionView: UICollectionView!
11    
12    @IBAction func logout(_ sender: UIButton) {
13        UserDefaults.standard.removeObject(forKey: "token")
14        performSegue(withIdentifier: "returnToLogin", sender: nil)
15    }
16    
17    var products: JSON = []
18    
19    override func viewDidLoad() {
20        if let _ = UserDefaults.standard.object(forKey: "token") {
21            displayToken.text = UserDefaults.standard.object(forKey: "token") as? String
22        }
23        
24        let layout = UICollectionViewFlowLayout()
25        layout.sectionInset = UIEdgeInsets(top: 15, left: 15, bottom: 15, right: 15)
26        collectionView.collectionViewLayout = layout
27        
28        getProducts()
29    }
30
31    override func didReceiveMemoryWarning() {
32        super.didReceiveMemoryWarning()
33    }
34    
35    func getProducts() {
36        
37        let url = "http://xxx.com/api/products"
38        let token = UserDefaults.standard.object(forKey: "token") as? String
39        let authorization = "Bearer " + token!
40        let headers: HTTPHeaders = ["Authorization": authorization, "Accept": "application/json"]
41        
42        Alamofire.request(url, method: .get, headers: headers).responseJSON {
43            res in
44            if res.result.isSuccess {
45                if let returnValue = res.result.value {
46                    self.products = JSON(returnValue)
47                    print("取得成功")
48                    print(self.products)
49                }
50            } else {
51                print("取得に失敗しました")
52            }
53        }
54    }
55    
56    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
57        
58        // 識別子("Cell")によって特定された再利用可能なセルオブジェクトを取り出す
59        let cell: ProductCell = collectionView.dequeueReusableCell(withReuseIdentifier: "Product", for: indexPath) as! ProductCell
60        
61        if self.products[indexPath.row]["thumbnail"].string != nil {
62            let imageUrlString: String = "http://www.com/data/thumbnail/" + self.products[indexPath.row]["thumbnail"].string!
63            
64            cell.productImage.image = getImageByUrl(url: imageUrlString)
65        }
66        
67        cell.productName.text = self.products[indexPath.row]["name"].string
68        cell.productNumber.text = self.products[indexPath.row]["number"].string
69        
70        cell.backgroundColor = .red
71        
72        return cell
73    }
74    
75    func getImageByUrl(url: String) -> UIImage {
76        let url = URL(string: url)
77        do {
78            let data = try Data(contentsOf: url!)
79            return UIImage(data: data)!
80        } catch let err {
81            print("Error: (err.localizedDescription)")
82        }
83        return UIImage()
84    }
85    
86    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
87        let horizontalSpace: CGFloat = 20
88        let cellSize: CGFloat = self.view.bounds.width / 3 - horizontalSpace
89        return CGSize(width: cellSize, height: cellSize * 1.618)
90    }
91    
92    // セクションの数
93    func numberOfSections(in collectionView: UICollectionView) -> Int {
94        return 1
95    }
96    
97    // セルの数
98    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
99        return 20
100    }
101}